Tabel HTML nampilkaké data tabular (baris lan kolom saka data sing ana gegandhengan) — ora kanggo layout. Tabel sing bisa diakses nggunakake struktur sing bener supaya screen reader bisa ngumumaké header karo saben sel.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> karo scope — nandai sel header. scope="col" kanggo header kolom, scope="row" kanggo header baris. Screen reader banjur ngumumaké "North, Revenue: $12,000" tinimbang waca sel tanpa konteks.<caption> — judhul kanggo kabeh tabel, anak pertama saka <table>; diwaca kanggo orientasi pangguna.<thead>/<tbody>/<tfoot> — nglumpukaké baris header, body, lan ringkesan; tulungan navigasi lan pasang header bisa mbalikan nalika cetakan.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Tabel layout ndadeken screen reader bingung (dheweke ngumumaké semantika tabel data) lan ora fleksibel. Gunakake CSS Grid/Flexbox kanggo layout halaman.
Semantika tabel sing bener (<th scope>, <caption>, bagean) sing digawaké tabel data bisa digunakake kanggo pangguna screen reader — isok ngikat saben nilai karo header baris lan kolom.
Jagane <table> ketat kanggo data tabular asli.