Tabel HTML menyajikan data tabular (baris dan kolom data terkait) — bukan tata letak. Tabel yang dapat diakses menggunakan struktur yang tepat sehingga pembaca layar dapat mengumumkan judul dengan setiap sel.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> dengan scope — menandai sel judul. scope="col" untuk judul kolom, scope="row" untuk judul baris. Pembaca layar kemudian mengumumkan "Utara, Pendapatan: $12.000" daripada membaca sel tanpa konteks.<caption> — judul untuk seluruh tabel, anak pertama dari <table> ; dibaca untuk mengarahkan pengguna.<thead>/<tbody>/<tfoot> — mengelompokkan baris judul, isi, dan ringkasan; membantu navigasi dan membiarkan judul berulang saat pencetakan.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Tabel tata letak membingungkan pembaca layar (mereka mengumumkan semantik tabel data) dan tidak fleksibel. Gunakan CSS Grid/Flexbox untuk tata letak halaman.
Semantik tabel yang tepat (<th scope>, <caption>, pengelompokan) adalah apa yang membuat tabel data dapat digunakan oleh pengguna pembaca layar — mereka menghubungkan setiap nilai dengan judul baris dan kolomnya.
Reservasi <table> secara ketat untuk data tabular asli.