HTML-tabeller præsenterer tabeldata (rækker og kolonner af relaterede data) — ikke layout. En tilgængelig tabel bruger korrekt struktur, så skærmlæsere kan annoncere overskrifter med hver celle.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> med scope — markerer overskriftsceller. scope="col" for kolonneoverskrifter, scope="row" for rækkeoverskrifter. Skærmlæsere annoncerer derefter "North, Revenue: $12,000" i stedet for at læse celler uden kontekst.<caption> — en titel for hele tabellen, det første barn af <table>; læst op for at orientere brugere.<thead>/<tbody>/<tfoot> — grupperer overskrifts-, hoved- og opsummeringsrækker; hjælp med navigation og lad overskriften gentages ved udskrivning.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Layouttabeller forvirrer skærmlæsere (de annoncerer datatabelsemantik) og er ufleksible. Brug CSS Grid/Flexbox til sidelayout.
Korrekt tabelsemantik (<th scope>, <caption>, opdeling) er det, der gør datatabeller brugbare for skærmlæserbrugere — de binder hver værdi til dens række- og kolonneoverskrifter.
Reserver <table> strengt til ægte tabeldata.