Jadwal latihan pada chapter sebelumnya kini memiliki header baris dan kolom. Persoalan tersisa ketika tabel itu berpindah konteks: pengunjung pembaca layar yang masuk langsung ke tengah tabel tidak mendengar kalimat pengantar halaman, dan tabel yang disalin ke dokumen lain turut kehilangan konteksnya. HTML menjawab kebutuhan ini dengan dua mekanisme: elemen caption untuk judul tabel dan atribut scope untuk menegaskan cakupan setiap th. Keduanya tidak mengubah tampilan tabel secara menonjol, tetapi keduanya mengubah seberapa jelas makna tabel dibaca.

Elemen caption #

Elemen caption memuat judul yang mendeskripsikan isi tabel secara ringkas. Aturan penempatannya kaku: caption wajib menjadi anak pertama dari table, ditulis sebelum baris pertama. Browser merender teksnya di bagian atas tabel secara bawaan, dan posisi tersebut dapat digeser dengan properti CSS caption-side bila desain menghendaki.

Jangan menggantikan caption dengan heading di atas tabel. Heading milik struktur halaman, sedangkan caption melekat pada tabel itu sendiri: pembaca layar mengumumkannya saat masuk ke tabel, dan konteksnya ikut berpindah ketika tabel disalin ke aplikasi lain. Pedoman W3C WAI merangkum perannya dengan singkat: caption mengidentifikasi topik keseluruhan sebuah tabel.

Mengapa Caption Penting #

Manfaat caption terdengar sederhana, tetapi dampaknya terasa pada tiga situasi berikut:

  • Konteks bagi pembaca layar: sebelum sel-sel dibaca satu per satu, judul tabel terucap lebih dulu sehingga pengunjung tahu tabel apa yang sedang didengarkan.
  • Ketahanan konteks: tabel yang dikutip ke pesan atau dokumen lain tetap membawa judulnya, berbeda dari heading halaman yang tertinggal di tempat asalnya.
  • Kepastian arah: pembaca yang melompat dari tabel ke tabel pada halaman panjang tidak kehilangan patokan tentang tabel mana yang sedang dibaca.

Kebiasaan yang sehat: setiap kali kita menutup table, pastikan ada caption di awalnya. Kebiasaan kecil ini menyelesaikan sebagian besar keluhan “tabel ini tentang apa” tanpa menulis satu baris CSS pun.

Atribut scope pada th #

Browser dapat menebak relasi header-data dari posisi sel, tetapi tebakan posisi tidak cukup bagi pembaca layar pada tabel yang kompleks. Atribut scope mempertegas relasi itu secara eksplisit: scope="col" menyatakan bahwa th berlaku untuk kolom di bawahnya, sedangkan scope="row" menyatakan bahwa th berlaku untuk baris di sampingnya. Dua nilai lain, yaitu colgroup dan rowgroup, menandai cakupan yang lebih besar pada kelompok kolom atau baris.

Atribut ini tidak mengubah tampilan sedikit pun: fungsinya murni semantik, memberi informasi pada pembaca layar dan mesin pencari. Pedoman WAI menyarankan asosiasi eksplisit semacam ini untuk tabel yang relasi headernya tidak dapat dijelaskan secara horizontal atau vertikal saja. Dengan scope, kita menceritakan relasi header-data dengan kata-kata milik HTML sendiri, bukan dengan posisi yang harus ditebak.

Contoh: Jadwal dengan Caption dan Scope #

Komunitas futsal Budi memajang jadwal latihan di halaman klubnya. Kita lengkapi tabel itu dengan caption dan scope pada seluruh th, lalu simpan sebagai jadwal-latihan.html:

html jadwal-latihan.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal Latihan Komunitas Futsal</title>
</head>
<body>
  <table>
    <caption>Jadwal Latihan Komunitas Futsal Bulan April</caption>
    <tr>
      <th scope="col">Waktu</th>
      <th scope="col">Senin</th>
      <th scope="col">Rabu</th>
      <th scope="col">Jumat</th>
    </tr>
    <tr>
      <th scope="row">18.00-19.00</th>
      <td>Tim Pemula</td>
      <td>Tim Pemula</td>
      <td>Tim Junior</td>
    </tr>
    <tr>
      <th scope="row">19.00-20.00</th>
      <td>Tim Utama</td>
      <td>Tim Junior</td>
      <td>Tim Utama</td>
    </tr>
  </table>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Teks "Jadwal Latihan Komunitas Futsal Bulan April" di atas tabel
  - Baris header hari tebal dan rata tengah
  - Kolom waktu di sisi kiri juga tebal dan rata tengah

Mari kita telaah peran setiap bagian:

  1. Baris 10 (caption): judul tabel, ditulis sebagai anak pertama table sebelum baris apa pun.
  2. Baris 12-15 (empat th scope="col"): header kolom; masing-masing berlaku untuk seluruh sel di bawahnya.
  3. Baris 18 dan 24 (dua th scope="row"): header baris yang menjadi judul bagi tiga sel kegiatan di sampingnya.
  4. Baris 19-21 dan 25-27 (sel td): data kegiatan yang kini memiliki rantai konteks lengkap, yaitu caption, header kolom, lalu header baris.

Tabel komunitas Budi kini menyampaikan judul, header kolom, dan header baris secara lengkap. Ketika tabel berkembang menjadi laporan yang panjang, kita membutuhkan pengelompokan baris yang lebih besar; elemen thead, tbody, dan tfoot menanti di chapter berikutnya.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

jadwal-latihan.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 Komunitas Futsal</title>
</head>
<body>
  <table>
    <caption>Jadwal Latihan Komunitas Futsal Bulan April</caption>
    <tr>
      <th scope="col">Waktu</th>
      <th scope="col">Senin</th>
      <th scope="col">Rabu</th>
      <th scope="col">Jumat</th>
    </tr>
    <tr>
      <th scope="row">18.00-19.00</th>
      <td>Tim Pemula</td>
      <td>Tim Pemula</td>
      <td>Tim Junior</td>
    </tr>
    <tr>
      <th scope="row">19.00-20.00</th>
      <td>Tim Utama</td>
      <td>Tim Junior</td>
      <td>Tim Utama</td>
    </tr>
  </table>
</body>
</html>