HTML lentelės pateikia lentelės duomenis (susijusios datos eilutes ir stulpelius) — ne maketą. Prieinama lentelė naudoja tinkamą struktūrą, kad ekrano skaitytuvas galėtų pranešti antraštės su kiekvienu langeliu.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> su scope — žymi antraščių langelius. scope="col" stulpelio antraštėms, scope="row" eilučių antraštėms. Ekrano skaitytuvas tada praneša "North, Revenue: $12,000" vietoj to, kad skaitytų langelius be konteksto.<caption> — visos lentelės pavadinimas, pirmasis <table> vaikas; perskaitytas vartotojams orientuoti.<thead>/<tbody>/<tfoot> — grupuoja antraščių, turinio ir santraukos eilutes; padeda naršymui ir leidžia antraštei kartotis spausdinti.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Maketavimo lentelės klaidina ekrano skaitytuvus (jie pranešama duomenų lentelės semantiką) ir nepakankamai lanksčios. Naudokite CSS Grid/Flexbox puslapio maketui.
Tinkama lentelės semantika (<th scope>, <caption>, skyrimų) yra tai, kas duomenų lenteles daro naudojamomis ekrano skaitytuvo naudotojams — jos sieja kiekvieną reikšmę su jos eilutės ir stulpelio antraštėmis.
Rezervuokite <table> griežtai tik tikram lentelės duomeniui.