A HTML táblázatok táblázatos adatokat (sorokat és oszlopokat tartalmazó, kapcsolódó adatokat) jelenítenek meg — nem elrendezést. Egy hozzáférhető táblázat megfelelő szerkezetet használ, hogy a képernyőolvasók minden cellánál bejelentsenek fejléceket.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> scope attribútummal — fejléc cellákat jelöl. scope="col" oszlopfejlécekhez, scope="row" sorfejlécekhez. A képernyőolvasók ezután "Észak, Bevétel: $12,000" hirdetést tesznek, ahelyett, hogy az összehangtalan cellákat olvasnák.<caption> — a teljes táblázat címe, a <table> első gyermeke; beolvasható a felhasználók tájékoztatása érdekében.<thead>/<tbody>/<tfoot> — fejléc-, test- és összefoglaló sorokat csoportosít; segít a navigációban és lehetővé teszi a fejléc megismétlődését nyomtatáskor.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Az elrendezési táblázatok zavart okoznak a képernyőolvasók számára (adattáblázat szemantikát hirdetnek) és rugalmatlanok. Használjon CSS Grid/Flexbox-ot az oldal elrendezéséhez.
A megfelelő táblázatszemantika (<th scope>, <caption>, szekcionálás) az, ami az adattáblázatokat használhatóvá teszi a képernyőolvasó-felhasználók számára — összekapcsolja az egyes értékeket a sor- és oszlopfejlécekkel.
A <table> -et szigorúan valódi táblázatos adatokra tartsa fenn.