HTML-taulukot esittävät taulukkomuotoisia tietoja (rivejä ja sarakkeita liittyvistä tiedoista) — ei asettelua. Saavutettava taulukko käyttää oikeaa rakennetta, jotta näytönlukijat voivat ilmoittaa otsikot jokaiselle solulle.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> ja scope — merkitsee otsakkosolu. scope="col" sarakeotsikkojen osalta, scope="row" riviotsikkojen osalta. Näytönlukijat ilmoittavat sitten "North, Revenue: $12,000" sen sijaan, että lukisivat soluja ilman kontekstia.<caption> — otsikko koko taulukolle, <table> ensimmäinen lapsi; luetaan käyttäjien suuntaamiseksi.<thead>/<tbody>/<tfoot> — ryhmittelee otsikko-, runko- ja yhteenvetorivi; auttaa navigoinnissa ja sallii otsikon toistamisen tulostuksessa.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Asettelu-taulukot hämmentävät näytönlukijoita (ne ilmoittavat datataulukon semantiikan) ja ovat joustamattomat. Käytä CSS Grid/Flexbox sivun asettelussa.
Oikea taulukon semantiikka (<th scope>, <caption>, osiot) tekee datataulukot käyttökelpoisiksi näytönlukijakäyttäjille — ne yhdistävät jokaisen arvon sen rivi- ja sarakeotsikkoihin.
Varaa <table> tiukasti oikeille taulukkomuotoisille tiedoille.