Table Header

Tabel pada chapter sebelumnya terbaca oleh kita karena kita mengenali polanya: kolom pertama nama, kolom terakhir harga. Browser tidak punya pengenalan itu, dan pembaca layar sama sekali tidak bisa menebak dari tampilan. Sel yang berperan sebagai judul perlu ditandai dengan elemen khusus agar perannya tercatat: th.

Chapter ini membahas th, dua pola penempatannya, dan alasan mengapa tampilan tebal saja tidak cukup.

Sel Judul dengan th #

Aturannya: th (table header) adalah sel judul — bukan sel data. Mekanismenya bekerja dua lapis. Pertama untuk mata: browser menampilkan isi th dengan huruf tebal dan rata tengah secara bawaan. Kedua untuk mesin: pembaca layar memperlakukan th sebagai label untuk sel-sel di sekitarnya, sehingga pengguna yang menelusuri sel data ikut mendengar judulnya. Atribut scope mempertegas arah relasi ini — kita bedah tuntas pada chapter tersendiri.

Contoh menu dengan baris judul di atas:

<table>
  <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 (perhatikan pada demo: judul kolom tampil tebal dan rata tengah):

Mari kita telaah kode di atas:

1. Baris 2–5 (<tr> pertama): baris judul — kedua sel memakai th, bukan td.
2. <th>Menu</th> dan <th>Harga</th>: judul untuk kolom pertama dan kolom kedua; browser menampilkannya tebal dan rata tengah.
3. Dua <tr> berikutnya: baris data berisi td — sel data berada tepat di bawah judulnya.

Dua Pola Penempatan #

th boleh menempati dua posisi. Pola pertama, header kolom: baris pertama seluruhnya th, judul menaungi sel-sel di bawahnya — contoh menu di atas. Pola kedua, header baris: kolom pertama tiap baris memakai th, judul menaungi sel-sel di sampingnya. Pola kedua cocok saat tiap baris adalah satu entitas utuh:

<table>
  <tr>
    <th>Paket Hemat</th>
    <td>Kopi tubruk</td>
    <td>Rp12.000</td>
  </tr>
  <tr>
    <th>Paket Lengkap</th>
    <td>Kopi susu dan roti bakar</td>
    <td>Rp36.000</td>
  </tr>
</table>

Kedua pola dapat pula digabungkan — judul kolom di baris atas dan judul baris di kolom kiri sekaligus; contoh gabungannya muncul pada chapter Atribut scope.

Tampilan Tebal Bukan Pengganti th #

Kebiasaan lama menandai judul dengan td yang ditebalkan lewat tag b atau CSS:

<tr>
  <td><b>Menu</b></td>
  <td><b>Harga</b></td>
</tr>

Tampilannya serupa di mata, tetapi maknanya hilang. Pembaca layar tidak menemukan satu pun judul; browser mencatat kedua sel itu sebagai data biasa. th bukan soal huruf tebal — ia menandai peran sel, dan peran itulah yang dibaca alat bantu.

Ringkasan #

• th = sel judul; browser menampilkannya tebal dan rata tengah secara bawaan.
• Dua pola penempatan: header kolom (baris pertama) dan header baris (kolom pertama).
• td yang ditebalkan kehilangan makna judul — pembaca layar tidak mengenalinya.

Judul tabel punya tempat khusus yang menempel secara semantik — itulah caption pada chapter berikutnya.