HTML tabulky zobrazují tabulková data (řádky a sloupce související údajů) — ne rozložení. Přístupná tabulka používá správnou strukturu, aby čtečky obrazovky mohly hlasitě přečíst záhlaví s každou buňkou.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> s scope — označuje buňky záhlaví. scope="col" pro záhlaví sloupců, scope="row" pro záhlaví řádků. Čtečky obrazovky pak hlasitě přečtou "North, Revenue: $12,000" namísto čtení buněk bez kontextu.<caption> — nadpis pro celou tabulku, první potomek <table>; přečten pro orientaci uživatelů.<thead>/<tbody>/<tfoot> — seskupuje řádky záhlaví, těla a souhrnu; pomáhá navigaci a umožňuje opakování záhlaví při tisku.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Tabulky pro rozložení matou čtečky obrazovky (hlásí sémantiku datových tabulek) a jsou neflexibilní. Použijte CSS Grid/Flexbox pro rozložení stránky.
Správná sémantika tabulky (<th scope>, <caption>, rozdělení) je to, co činí datové tabulky použitelné pro uživatele čteček obrazovky — spojují každou hodnotu s jejím řádkem a záhlavím sloupce.
Zachovejte <table> striktně pro skutečná tabulková data.