HTML20 / 46

thead, tbody, dan caption

Untuk tabel data yang sesungguhnya, pisahkan bagiannya: <thead> untuk baris header, <tbody> untuk isi, dan <tfoot> untuk baris total. Pembagian ini bukan kosmetik — ia memberi browser dan teknologi bantu informasi bagian mana yang merupakan kepala tabel. <caption> memberi tabel judul resmi yang dibacakan lebih dulu oleh screen reader, sehingga penggunanya tahu isi tabel sebelum menyusurinya. Ingat urutannya: caption wajib menjadi elemen pertama di dalam table, sebelum thead.

👀 Contoh dulu

<table>
  <caption>Laporan Stok</caption>
  <thead>
    <tr><th>Produk</th></tr>
  </thead>
  <tbody>
    <tr><td>Kopi</td></tr>
  </tbody>
</table>

Hasilnya: Tampilan mirip tabel biasa, tapi caption muncul sebagai judul tabel dan strukturnya kini terbagi jelas.

💡 caption harus jadi elemen PERTAMA di dalam table, sebelum thead.

📝 Sekarang giliranmu

Bungkus ulang tabel: tambahkan <caption> bertuliskan Data Peserta, letakkan baris header di dalam <thead> dan baris data di dalam <tbody>.

Preview