Tabel harga buah pada chapter sebelumnya menampilkan angka “Rp32.000” tanpa label apa pun. Pembaca manusia menebak bahwa angka tersebut adalah harga, sedangkan pembaca layar tidak memiliki petunjuk tentang arti tiap kolom. HTML menyelesaikan persoalan ini dengan elemen th (table header cell), yaitu sel yang menyatakan dirinya sebagai judul bagi sel-sel lain. Chapter ini membahas perbedaan th dengan td, penempatan header pada baris dan kolom, serta tampilan bawaan yang diberikan browser.

th versus td #

td dan th sama-sama sel: keduanya anak langsung tr dan keduanya ikut membentuk kisi tabel. Perbedaannya terletak pada peran yang kita sampai­kan melalui elemen tersebut: td menandai sel data, sedangkan th menandai sel judul. Pedoman W3C WAI menyebut kewajiban ini dengan lugas: sel header harus ditulis th dan sel data ditulis td agar tabel dapat diakses.

Browser juga memberi tampilan berbeda pada th: teksnya tampil tebal dan rata tengah pada seluruh browser modern. Tampilan itu berasal dari stylesheet bawaan browser, bukan dari makna th itu sendiri, dan dapat diubah dengan CSS. Prinsip yang sama pernah kita terima pada section Lists: tulis elemen karena maknanya, lalu biarkan tampilan mengikuti.

Header pada Baris dan Kolom #

Header dapat muncul pada dua posisi. Header kolom berupa baris pertama yang sel-selnya berupa th, dan sel tersebut menjelaskan isi kolom yang berada di bawahnya. Header baris berupa sel th di awal setiap baris, yang menjelaskan isi baris ke arah kanannya. Tabel dua dimensi yang lengkap memakai keduanya sekaligus: satu baris judul di atas, satu kolom judul di kiri.

Sel pojok kiri atas biasanya tidak menjadi judul apa pun, sehingga kita menuliskannya sebagai td kosong agar baris header tetap sejajar dengan kolom data. Relasi antara setiap th dan kelompok sel yang dipimpinnya dapat dipertegas dengan atribut scope; penjelasan lengkapnya kita simpan untuk chapter Caption dan Scope.

Contoh: Jadwal dengan Header Baris dan Kolom #

Jadwal latihan Siti menyandingkan waktu (pagi dan sore) dengan hari (Senin hingga Rabu). Waktu menjadi header baris, hari menjadi header kolom, dan persilangannya berisi kegiatan. Simpan file berikut sebagai tabel-headers.html:

html tabel-headers.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal Latihan Siti</title>
</head>
<body>
  <h1>Jadwal Latihan Mingguan</h1>
  <table>
    <tr>
      <td></td>
      <th>Senin</th>
      <th>Selasa</th>
      <th>Rabu</th>
    </tr>
    <tr>
      <th>Pagi</th>
      <td>Lari</td>
      <td>Renang</td>
      <td>Sepeda</td>
    </tr>
    <tr>
      <th>Sore</th>
      <td>Futsal</td>
      <td>Yoga</td>
      <td>Libur</td>
    </tr>
  </table>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Baris pertama: teks "Senin", "Selasa", "Rabu" tebal dan rata tengah
  - Kolom pertama: teks "Pagi" dan "Sore" tebal dan rata tengah
  - Sel kegiatan tampil biasa dan rata kiri

Mari kita telaah peran setiap baris kode:

  1. Baris 11-16 (tr pertama): baris header kolom; td kosong pada baris 12 menjaga pojok kiri atas, lalu tiga th menandai nama hari.
  2. Baris 18 (th Pagi): header baris pertama, menjadi judul bagi sel Lari, Renang, dan Sepeda.
  3. Baris 19-21 (tiga td): sel data yang maknanya baru lengkap pada persilangan waktu dan hari.
  4. Baris 24 (th Sore): header baris kedua dengan pola yang sama seperti baris Pagi.

Kapan th, Kapan td #

Aturan pemilihannya ringkas dan dapat dipandu oleh daftar berikut:

  • Sel yang menjelaskan kolom di bawahnya → tulis th.
  • Sel yang menjelaskan baris di sampingnya → tulis th.
  • Sel berisi nilai data → tulis td.
  • Sel pojok tanpa peran judul → tulis td, boleh kosong.

Tabel dengan header yang benar kini menyampaikan strukturnya dengan jelas. Dua hal masih tertunda: tabel tersebut belum memiliki judul keseluruhan, dan relasi header-data belum dinyatakan secara eksplisit. Keduanya menjadi topik chapter Caption dan Scope.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

tabel-headers.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal Latihan Siti</title>
</head>
<body>
  <h1>Jadwal Latihan Mingguan</h1>
  <table>
    <tr>
      <td></td>
      <th>Senin</th>
      <th>Selasa</th>
      <th>Rabu</th>
    </tr>
    <tr>
      <th>Pagi</th>
      <td>Lari</td>
      <td>Renang</td>
      <td>Sepeda</td>
    </tr>
    <tr>
      <th>Sore</th>
      <td>Futsal</td>
      <td>Yoga</td>
      <td>Libur</td>
    </tr>
  </table>
</body>
</html>