Caption

Setiap tabel data layak diberi judul. HTML menyediakan tempat khusus yang menempelkan judul pada tabelnya secara semantik: elemen caption. Judul bebas yang ditulis di luar tabel bisa berpindah, tertinggal, atau kehilangan hubungan — caption tidak.

Chapter ini membahas posisi wajib caption, perbedaannya dengan heading di luar tabel, dan satu kesalahan penempatan yang kerap terjadi.

Aturan dan Posisi #

Aturannya tegas: caption harus menjadi elemen anak pertama dari table — ditulis sebelum baris mana pun. Browser menampilkannya di atas tabel secara bawaan; posisi visual dapat dipindah ke bawah lewat CSS caption-side tanpa mengubah markup.

Mekanismenya terletak pada makna: caption melekat pada tabelnya. Saat pengguna pembaca layar tiba di tabel, caption umumnya ikut diumumkan sebagai pembuka — pengguna menangkap konteks sebelum mendengar sel pertama. Hubungan serupa tidak dimiliki heading di luar tabel: h2 atau h3 di dekat tabel hanyalah teks di sekitarnya, tanpa relasi yang tercatat.

Contoh menu dengan caption:

<table>
  <caption>Menu andalan Kedai Kopi Siti</caption>
  <tr>
    <th>Menu</th>
    <th>Harga</th>
  </tr>
  <tr>
    <td>Kopi susu</td>
    <td>Rp18.000</td>
  </tr>
  <tr>
    <td>Teh tarik</td>
    <td>Rp15.000</td>
  </tr>
</table>

Hasil Render:

Mari kita telaah kode di atas:

1. Baris 2 (<caption>): judul tabel — posisinya sebelum tr pertama; satu tabel hanya boleh memuat satu caption.
2. Baris 3–6: baris judul th seperti biasa — caption tidak menggantikan header kolom, keduanya saling melengkapi.
3. Sisanya: baris data — tidak ada perubahan dari pola tabel sebelumnya.

Posisi yang Salah #

Kesalahan umumnya tampak seperti ini — caption ditulis di tengah-tengah baris:

<table>
  <tr>
    <td>Kopi susu</td>
    <td>Rp18.000</td>
  </tr>
  <caption>Menu andalan Kedai Kopi Siti</caption>
  <tr>
    <td>Teh tarik</td>
    <td>Rp15.000</td>
  </tr>
</table>

Parser menangkap caption di tengah baris sebagai token pada posisi yang tidak diharapkan: baris yang sedang terbuka dipaksa selesai, caption ditempatkan setelah baris pertama, dan baris kedua membentuk kelompok tersendiri — struktur DOM berubah dari yang kita tulis. Judul tidak lagi berada di posisi anak pertama sehingga hubungan semantiknya tidak dijamin. Aturannya tetap satu: caption sebelum semua tr.

Ringkasan #

• caption = judul tabel; wajib menjadi anak pertama table, sebelum baris mana pun.
• Browser menampilkannya di atas tabel secara bawaan; CSS caption-side dapat memindahkannya ke bawah.
• caption melekat secara semantik dan diumumkan bersama tabel — heading di luar tabel tidak punya relasi itu.
• caption deskriptif membantu semua pengguna menangkap konteks tabel.

Selanjutnya kita mengelompokkan baris menjadi kepala, isi, dan ringkasan dengan thead, tbody, dan tfoot.