Tabelat HTML paraqesin të dhëna tabelare (rreshta dhe kolona të të dhënave të lidhura) — jo ndesa. Një tabelë e arritshme përdor strukturën e duhur në mënyrë që lexuesit i ekranit mund të njoftojnë kokën për çdo qelizë.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> me scope — shënon qelizat e kokës. scope="col" për kokën e kolonave, scope="row" për kokën e rreshtave. Lexuesit i ekranit më pas njoftojnë "Veriu, Të ardhura: $12,000" në vend të leximit të qelizave pa kontekst.<caption> — një titull për të gjithë tabelën, fëmija i parë i <table>; lexohet për të orientuar përdoruesit.<thead>/<tbody>/<tfoot> — grup rreshta kokë, trup dhe përmbledhje; ndihmojnë në navigim dhe lejojnë që kokën të përsëritet kur shtypi.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Tabelat e ndesave ngatërrojnë lexuesit e ekranit (ato njoftojnë semantikën e tabelës së të dhënave) dhe janë jofleksibile. Përdorni CSS Grid/Flexbox për ndesat e faqes.
Semantika e duhur e tabelës (<th scope>, <caption>, seksionimi) është ajo që bën tabelat e të dhënave të përdorshme për përdoruesit e lexuesit të ekranit — ato lidhin çdo vlerë me titujt e rreshtave dhe kolonave të tij.
Limitoni <table> rreptësisht për të dhëna tabelare të vërteta.