Belajar HTML : Cara membuat table di HTML

Bismillahirahmanirrahim

Assalamualaikum Warahmatullahi Wabarakatuh

Belajar HTML : Cara membuat table di HTML

Salah satu cara memberikan informasi di html adalah degan table.

Kita bisa gunakan tag <table> untuk membuat sebuah table dengan tag <tr> sebagai baris table dan tag <th> sebagai isi dari table, kita bisa lihat contoh penggunaannya di bawah ini :


<!DOCTYPE html>
<html>
<body>
<table style=”width:100%”>
<tr>
     <th>Nama Awal</th>
     <th>Nama Akhir</th>
</tr>
<tr>
     <th>Dimas</td>
     <td>adi </td>
</tr>
<tr>
     <td>Muhammad</td>
     <td>Farhan</td>
</tr>
</table>
</body>
</html>

HTML table – Cara Menambahkan border

Jika kita ingin memberikan border atau batas – batas pada table, kita bisa gunakan cara di bawah ini


<!DOCTYPE html>
<html>
<head>
<style>
table,th,td{
border:1px solid black;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
     <th>Nama Awal</th>
     <th>Nama Akhir</th>
</tr>
<tr>
     <td>Dimas</td>
     <td>adi </td>
</tr>
<tr>
     <td>Muhammad</td>
     <td>Farhan</td>
</tr>
</table>
</body>
</html>

Jika kita ingin membuat bordernya satu kita bisa menambahkan perintah border-collapse:collapse, kita bisa lihat contohnya di bawah ini


<!DOCTYPE html>
<html>
<head>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
     <th>Nama Awal</th>
     <th>Nama Akhir</th>
</tr>
<tr>
     <td>Dimas</td>
     <td>adi </td>
</tr>
<tr>
     <td>Muhammad</td>
     <td>Farhan</td>
</tr>
</table>
</body>
</html>

Kita bisa lihat perbedaanya dengan table yang di atas, yang di atas memiliki dua garis sedangkan yang di bawah memiliki sat ugaris.

HTML Table Satu Kolom Dua Kolom

Jadi maksudnya itu apabila kita ingin membuat table dari satu kolom dan bisa di isi dua kolom, mungkin akan lebih mudah di pahami apabila kita langsung lihat contohnya, bisa kita lihat di bawah


<!DOCTYPE html>
<html>
<head>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
     <th>Nama Awal</th>
     <th colspan=”2”>Telepon</th>
</tr>
<tr>
     <td>Dimas</td>
     <td>55454645667 </td>
     <td>64657686767</td>
</tr>
</table>
</body>
</html>

Kemudian selanjutnya kita bisa membuat satu baris di isi oleh dua baris, kita bisa langsung lihat contohnya di bawah ini



<!DOCTYPE html>
<html>
<head>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
   <th>Nama</th>
   <td>Dimas</td>
</tr>
<tr>
<th rowspan=”2”>Telepon</th>
<td>089765567</td>
</tr>
<tr>
<td>089765567</td>
</tr>
</table>
</body>
</html>

Ya mungkin itu yang bisa saya sampaikan mohon maaf apabila ada susunan kata yang masih belum baik, karena saya masih tahap belajar, semoga bermanfaat apa yang saya sampaikan wasalamualaikum warahmatullahi wabarakatuh

Belajar HTML : Cara membuat table di HTML

0 Response to "Belajar HTML : Cara membuat table di HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel