HTML Tables Basic Caption Thead Tbody Colspan

Ringkasan

<table> untuk data tabular. Struktur semantik (caption, thead, tbody, th scope) membuat tabel mudah dibaca & accessible.

Konsep Dasar

• <caption> — judul tabel.
• <thead> / <tbody> / <tfoot> — pengelompokan.
• <th scope="col|row"> — header sel, beri arah.
• colspan / rowspan — gabung sel.

Cara Kerja / Struktur

html

<table>
  <caption>Daftar Harga</caption>
  <thead><tr><th scope="col">Item</th><th scope="col">Harga</th></tr></thead>
  <tbody>
    <tr><th scope="row">Pro</th><td>Rp 99rb</td></tr>
    <tr><th scope="row">Basic</th><td>Rp 0</td></tr>
  </tbody>
</table>

Catatan Implementasi

• Tabel bukan untuk layout halaman (pakai CSS Grid/Flexbox).
• scope sangat membantu pembaca layar memahami relasi sel.

Kesalahan Umum

• Pakai tabel untuk layout.
• th tanpa scope.
• Nested table berlebihan (sulit di-scan).

Glosarium

• Data tabular: informasi yang relasional baris/kolom.
• Scope: arah header sel (kolom/baris).

Referensi

• HTML Tables dan Tabular Data Accessibility
• HTML Table Accessibility Lanjut