HTML-tabeller presenterar tabellarisk data (rader och kolumner med relaterad data) — inte layout. En tillgänglig tabell använder korrekt struktur så att skärmläsare kan annonsera rubrikerna för varje cell.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> med scope — markerar rubrikceller. scope="col" för kolumnrubriker, scope="row" för radrubriker. Skärmläsare presenterar då "Nord, Intäkt: $12,000" istället för att läsa celler utan sammanhang.<caption> — en titel för hela tabellen, det första elementet i <table>; läses upp för att orientera användare.<thead>/<tbody>/<tfoot> — grupperar rubrik-, huvud- och sammanfattningsrader; stöder navigation och låter rubriken upprepas vid utskrift.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Layout-tabeller förvirrar skärmläsare (de presenterar semantiken för datatabeller) och är inflexibla. Använd CSS Grid/Flexbox för sidlayout.
Korrekt tabellsemantik (<th scope>, <caption>, sekcioner) är vad som gör datatabeller användbara för skärmläsaranvändare — de kopplar varje värde till dess rad- och kolumnrubriker.
Reservera <table> strikt för äkta tabellarisk data.