Tabel: thead, tbody, tfoot, th

Kenapa Baris Perlu Dikelompokkan

Tabel kecil berisi tiga baris tidak butuh struktur khusus. Tapi bayangkan tabel laporan keuangan dengan 200 baris: mana baris judulnya, mana datanya, mana baris totalnya? Tanpa pengelompokan, semuanya terlihat sama dan kamu harus mengandalkan tebakan. Di sinilah thead, tbody, tfoot, dan th berperan: mereka memberi tahu browser (dan pembaca kode) peran tiap bagian tabel.

Ada alasan praktis juga. Saat tabel panjang dicetak dan terpotong menjadi beberapa halaman, browser otomatis mengulang baris thead di setiap halaman, jadi pembaca tidak kehilangan konteks kolom. Dan saat kamu belajar CSS nanti, menargetkan tbody tr untuk membuat baris belang (zebra striping) jauh lebih mudah kalau barisnya sudah dikelompokkan dengan benar.

Contoh 1: th untuk Sel Header

<th> (table header) dipakai untuk sel yang berisi judul kolom atau judul baris, bukan data biasa. Browser menampilkannya tebal dan rata tengah secara default, dan yang lebih penting, screen reader mengumumkannya sebagai header:

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Harga</th>
  </tr>
  <tr>
    <td>Kopi Tubruk</td>
    <td>Rp15.000</td>
  </tr>
  <tr>
    <td>Es Teh</td>
    <td>Rp8.000</td>
  </tr>
</table>

Bandingkan dengan baris pertama yang memakai td biasa: tampilannya memang bisa dibuat tebal dengan CSS, tapi maknanya hilang. <th> memberi makna, bukan cuma tampilan. Inilah bedanya HTML semantik dengan HTML asal jadi.

Contoh 2: Struktur Lengkap yang Realistis

Untuk tabel yang lebih besar, kelompokkan barisnya dan beri judul tabel dengan <caption>:

<table border="1">
  <caption>Daftar Harga Minuman</caption>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Ukuran</th>
      <th>Harga</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kopi Tubruk</td>
      <td>Reguler</td>
      <td>Rp15.000</td>
    </tr>
    <tr>
      <td>Kopi Susu</td>
      <td>Besar</td>
      <td>Rp20.000</td>
    </tr>
    <tr>
      <td>Es Teh</td>
      <td>Reguler</td>
      <td>Rp8.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total item</td>
      <td></td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

Peran tiap bagian:

• <caption>: judul tabel. Ditulis tepat setelah tag pembuka <table>, sebelum yang lain. Ini bagian resmi dari tabel, bukan sekadar teks di atasnya.
• <thead>: kelompok baris judul (biasanya berisi th). Diulang otomatis di tiap halaman saat dicetak.
• <tbody>: kelompok baris data utama. Tabel boleh punya lebih dari satu tbody kalau datanya terbagi dalam beberapa kelompok.
• <tfoot>: ringkasan atau total. Dalam kode ditulis setelah thead (sebelum tbody), tapi browser merendernya di bagian bawah tabel. Urutan penulisan ini warisan dari zaman dulu agar browser bisa menampilkan total sebelum seluruh data selesai dimuat.

Kesalahan Umum Pemula

SALAH: menaruh <caption> tidak di awal tabel.

<table border="1">
  <thead>
    <tr><th>Nama</th></tr>
  </thead>
  <caption>Daftar Harga</caption>
</table>

<caption> wajib menjadi anak pertama dari <table>. Kalau ditaruh setelah thead atau tbody, strukturnya tidak valid dan screen reader bisa gagal mengenalinya sebagai judul tabel.

SALAH: memakai <td> yang ditebalkan sebagai pengganti <th>.

<tr>
  <td><b>Nama</b></td>
  <td><b>Harga</b></td>
</tr>

Tampilannya mirip header, tapi bagi screen reader ini tetap data biasa, bukan judul kolom. Selalu pakai <th> untuk header yang sesungguhnya.

SALAH: mengira tfoot harus ditulis paling akhir di kode.

Karena dirender di bawah, banyak pemula menulis tfoot setelah tbody. Itu tetap jalan di browser modern, tapi urutan yang benar dan paling kompatibel adalah caption, thead, tfoot, lalu tbody.

Catatan teknis: tbody sebenarnya selalu ada walaupun tidak ditulis. Browser menyisipkannya otomatis di DOM. Menuliskannya secara eksplisit membuat struktur jelas bagi manusia yang membaca kodemu, dan memudahkan styling baris belang (zebra) dengan CSS nanti.