Tabelele HTML prezintă date tabulare (rânduri și coloane de date conexe) — nu layout. Un tabel accesibil folosește o structură corectă pentru ca cititorii de ecran să poată anunța antetele cu fiecare celulă.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> cu scope — marchează celulele de antet. scope="col" pentru antetele de coloană, scope="row" pentru antetele de rând. Cititorii de ecran vor anunța atunci "North, Revenue: $12,000" în loc să citească celulele fără context.<caption> — un titlu pentru întreaga tabel, primul copil al <table>; citit pentru a orienta utilizatorii.<thead>/<tbody>/<tfoot> — grupează rândurile de antet, corp și rezumat; ajută la navigare și permit ca antetul să se repete la tipărire.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Tabelele de layout confundă cititorii de ecran (acestea anunță semantica tabelului de date) și sunt inflexibile. Folosiți CSS Grid/Flexbox pentru layout de pagină.
Semantica tabelului corect (<th scope>, <caption>, segmentare) este ceea ce face tabelele de date utilizabile pentru utilizatorii de cititori de ecran — acestea leagă fiecare valoare de antetele corespunzătoare ale rândului și coloanei.
Rezervaţi <table> strict pentru date tabulare autentice.