HTML-tabeller presenterer tabellariske data (rader og kolonner med relaterte data) — ikke layout. En tilgjengelig tabell bruker riktig struktur slik at skjermlesere kan presentere overskrifter sammen 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 radoverskrifter. Skjermlesere vil da annonsere "North, Revenue: $12,000" i stedet for å lese celler uten kontekst.<caption> — en tittel for hele tabellen, det første barnet av <table>; leses opp for å orientere brukere.<thead>/<tbody>/<tfoot> — grupperer header-, innholds- og sammenfattingsrader; hjelper til med navigasjon og lar overskriften gjentas ved utskrift.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Layouttabeller forvirrer skjermlesere (de annonserer semantikk for datatabell) og er lite fleksible. Bruk CSS Grid/Flexbox for sideoppsett.
Riktig tabellsemantica (<th scope>, <caption>, seksjonering) er det som gjør datatabeller brukbare for skjermleserbrukere — de knytter hver verdi til sine rad- og kolonneoverskrifter.
Reserver <table> strengt til ekte tabellariske data.