HTML Tables dan Tabular Data Accessibility

Definisi

Elemen table dipakai untuk data tabular: data yang secara natural dibaca dalam baris dan kolom, dengan hubungan antar-sel yang penting. Contohnya laporan transaksi, jadwal, perbandingan spesifikasi, atau data statistik.

table bukan elemen layout umum. Kalau tujuan utamanya hanya mengatur posisi visual, gunakan CSS layout seperti Flexbox atau Grid. Begitu data punya struktur dua dimensi, semantik tabel mulai punya nilai besar, terutama untuk browser, screen reader, dan alat bantu lain yang perlu memahami hubungan antarsel.

Kapan memakai table

Pakai table saat informasi paling masuk akal dibaca sebagai matriks baris-kolom.

Cocok untuk

• daftar transaksi dengan tanggal, deskripsi, nominal, dan status
• jadwal kelas atau jadwal rilis
• perbandingan fitur antar paket
• data keuangan, statistik, inventaris, dan laporan
• data yang memang punya header kolom dan sering dibaca lintas baris

Jangan pakai table untuk

• layout halaman
• susunan kartu yang bisa dibuat dengan Grid atau Flexbox
• form dua kolom hanya karena “lebih rapi”
• navigasi, sidebar, atau positioning visual yang bukan data

Kalau pembaca tidak perlu memahami hubungan baris-kolom, berarti itu bukan kandidat yang baik untuk table.

Struktur dasar tabel

Struktur tabel yang sehat biasanya tersusun seperti ini:

Urutan elemen yang umum:

1. caption untuk judul tabel
2. thead untuk header kolom
3. tbody untuk data utama
4. tfoot untuk ringkasan atau total

Contoh dasar:

html

<table>
  <caption>Laporan transaksi Januari 2026</caption>
  <thead>
    <tr>
      <th scope="col">Tanggal</th>
      <th scope="col">Deskripsi</th>
      <th scope="col">Nominal</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2026-01-03</td>
      <td>Langganan hosting</td>
      <td>Rp250.000</td>
      <td>Lunas</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total</th>
      <td>Rp250.000</td>
      <td></td>
    </tr>
  </tfoot>
</table>

Fungsi thead, tbody, dan tfoot

thead

thead menandai grup baris header. Isinya biasanya satu atau beberapa baris yang menjelaskan kolom.

Manfaat utamanya:

• memisahkan header dari data
• membantu styling dan scripting
• membuat struktur lebih mudah dipindai

tbody

tbody berisi data utama tabel. Ini bagian yang paling sering diisi ulang secara dinamis.

Manfaatnya:

• jelas memisahkan data dari header dan ringkasan
• memudahkan render data dari API
• membantu pembaca memahami mana konten inti tabel

tfoot

tfoot berisi ringkasan, total, atau informasi penutup tabel.

Catatan penting:

• secara semantik, tfoot tetap bagian dari tabel
• secara visual, browser bisa menempatkannya di bawah atau memprosesnya terpisah dari DOM order tampilan
• gunakan hanya jika memang ada ringkasan yang logis

Kalau tabel tidak punya total atau footer, tfoot boleh tidak dipakai.

Elemen th dan td

Perbedaan dasarnya sederhana:

• th = header cell
• td = data cell

th memberi konteks untuk sel lain. Tanpa header yang tepat, tabel besar cepat jadi membingungkan, terutama saat dibaca tanpa melihat keseluruhan layar.

Kapan pakai th

Gunakan th untuk:

• label kolom di baris header
• label baris di kolom pertama kalau baris merepresentasikan entitas
• subtotal atau total yang berperan sebagai penanda, bukan data biasa

Atribut penting pada th

scope

Atribut scope menjelaskan sel header berlaku untuk bagian mana.

Nilai yang umum:

• scope="col" — header untuk kolom
• scope="row" — header untuk baris
• scope="colgroup" — header untuk grup kolom
• scope="rowgroup" — header untuk grup baris

Contoh:

html

<tr>
  <th scope="row">Produk A</th>
  <td>12</td>
  <td>Rp120.000</td>
</tr>

Dengan scope, screen reader lebih mudah menentukan konteks sel data tanpa menebak-nebak hubungan antar-elemen.

Kapan butuh headers

Untuk tabel yang rumit, misalnya header bertingkat atau sel yang punya hubungan silang lebih kompleks, scope saja kadang tidak cukup. Saat itu headers dan id bisa dipakai untuk relasi eksplisit antar-sel.

Untuk tabel sederhana, scope biasanya sudah memadai.

Caption

caption adalah judul tabel yang semantik, bukan sekadar teks dekoratif.

Fungsinya:

• memberi konteks cepat tentang isi tabel
• membantu screen reader mengenali tujuan tabel
• memudahkan scan saat ada banyak tabel di satu halaman

Contoh:

html

<table>
  <caption>Daftar harga paket</caption>
  ...
</table>

Catatan penempatan

Secara default, caption berada di awal tabel dalam urutan semantik. Kalau butuh penyesuaian tampilan, gunakan CSS, bukan memindahkan maknanya dengan markup aneh.

Jangan mengganti caption dengan heading biasa di luar tabel kalau judul itu memang melekat pada tabel tertentu.

Tabel kompleks

Tidak semua tabel itu sederhana. Ada tabel yang punya header bertingkat atau pengelompokan kolom.

Contoh pola umum:

• satu header baris untuk grup besar
• sub-header untuk rincian kolom
• sel data di bawah beberapa lapisan konteks

Pada kasus seperti ini, pastikan relasi header tetap jelas. Kalau tidak, tabel cepat berubah jadi blok angka yang susah dibaca.

Aksesibilitas tabel

Agar tabel enak dipakai oleh teknologi bantu, cek beberapa hal berikut:

• ada caption jika tabel butuh judul kontekstual
• header kolom ditandai dengan th
• header baris ditandai dengan th jika relevan
• gunakan scope untuk memperjelas cakupan header
• jangan gabungkan sel secara berlebihan kalau tidak perlu
• urutan DOM tetap logis dan mengikuti urutan baca
• hindari tabel kosong yang hanya dipakai untuk jarak visual

Kalau tabel panjang, pertimbangkan apakah pengguna butuh pengelompokan tambahan atau filter supaya tidak harus membaca terlalu banyak data sekaligus.

Jebakan umum saat memakai tabel untuk layout

Ini kesalahan klasik yang masih sering muncul:

1. Memakai tabel untuk susunan visual

Dulu tabel sering dipakai untuk layout halaman karena CSS belum matang. Sekarang pola itu justru merusak semantik.

Masalahnya:

• struktur DOM jadi menipu
• screen reader membaca layout seolah data
• responsivitas lebih sulit
• styling dan reflow lebih kaku

2. Mengandalkan tabel untuk kolom visual semata

Kalau tujuanmu hanya membuat dua atau tiga kolom tampilan, gunakan Grid atau Flexbox. table bukan alat utama untuk layout kartu, hero section, atau panel dashboard.

3. Tidak memberi header yang jelas

Tabel tanpa th dan scope membuat data sulit dipahami di tabel besar. Pembaca mungkin masih melihat isinya, tetapi konteks antar-sel jadi hilang.

4. Menggunakan caption sebagai judul dekoratif di luar konteks

caption harus menjelaskan tabel itu sendiri. Kalau teksnya lebih cocok jadi heading section, letakkan sebagai heading section, bukan dipaksa menjadi caption.

5. Menyalahgunakan colspan dan rowspan

Sel gabungan memang kadang perlu, tetapi jika dipakai terlalu banyak, hubungan antar-sel jadi susah dibaca dan dipelihara.

6. Menyimpan data yang tidak tabular di dalam tabel

Kalau isi utamanya adalah kumpulan kartu, daftar label-value, atau blok konten bebas, struktur tabel biasanya bukan pilihan terbaik.

Contoh keputusan cepat

Kalau sedang ragu, pakai pertanyaan ini:

• Apakah data ini dibaca per baris dan per kolom?
• Apakah header membantu memahami nilai di setiap sel?
• Apakah hubungan antar-sel penting?
• Apakah pengguna perlu membandingkan banyak nilai dalam grid?

Kalau jawabannya ya, table cocok. Kalau tidak, cari struktur lain.

Ringkasan praktis

• pakai table untuk data tabular, bukan layout
• pakai thead, tbody, dan tfoot untuk memisahkan fungsi struktur
• pakai th untuk header, td untuk data
• pakai scope supaya hubungan header lebih jelas
• pakai caption untuk judul semantik tabel
• hindari table untuk susunan visual yang bisa diselesaikan dengan CSS layout

Referensi terkait

• HTML Forms, Inputs, Labels, Validation, dan Accessibility
• HTML Semantics dan Struktur Dokumen
• CSS Display, Overflow, dan Containment Sederhana