Tutorial Tabel HTML Part 8: Cara Membuat Struktur Tabel HTML (tag thead, tfoot dan tbody)
Halo Kawan-kawan,
Pada bagian ini kita akan belajar “Cara Membuat Struktur Tabel HTML (tag thead, tfoot dan tbody)”. Hal ini diperlukan untuk ‘membagi’ tabel menjadi bagian-bagian yang terpisah, misalnya bagian judul (head), bagian penutup (foot), dan bagian isi tabel (body) jika isi tabel sudah mulai kompleks.
Secara sederhana tag table sendiri sebenarnya dapat dibangun hanya dengan menggunakan tag table, tag tr, dan tag td. Namun jika kita membutuhkan pembagian struktur tabel HTML yang lebih jelas, HTML menyediakan tag khusus untuk keperluan ini, terdiri dari tag thead, tfoot dan tbody.
Perhatikan code berikut:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag thead, tfoot dan tbody dalam Tabel</title>
</head>
<body>
<h3>Belajar Tag thead, tfoot dan tbody dalam Tabel</h3>
<table border="1">
<thead>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Hasil Code:
Jika memperhatikan code diatas dengan teliti, kita telah menambah 3 tag baru, yakni tag thead, tfoot dan tbody (singkatan dari table header, table foot, dan table body). Ketiga tag tersebut digunakan untuk membagi struktur tabel menjadi 3 bagian.
Berdasarkan urutan penulisan dengan yang ditampilkan di web browserpun mengalami pergeseran. Dapat dilihat bahwa untuk tag tfoot, walaupun dibuat persis setelah thead pada awal tabel, namun web browser akan menampilkannya pada baris terakhir dari tabel.
Mungkin dalam struktur table yang sederhana penggunaan tag thead, tfoot dan tbody jarang digunakan, namun jika table yang dibuat sudah kompleks tag-tag ini akan sangat membantu memudahkan dalam ‘mengatur’ tampilan tabel, terutama jika menggunakan kode CSS nantinya.
Untuk tutorial selanjutnya, kita akan membahas tentang cara membuat kolom tabel menjadi satu grup dengan tag colgroup dan tag col.