Tabele HTML prezentują dane tabelaryczne (wiersze i kolumny powiązanych danych) — nie układ strony. Dostępna tabela używa prawidłowej struktury, aby czytniki ekranu mogły ogłaszać nagłówki wraz z każdą komórką.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> z scope — oznacza komórki nagłówka. scope="col" dla nagłówków kolumn, scope="row" dla nagłówków wierszy. Czytniki ekranu będą wtedy ogłaszać "North, Revenue: $12,000" zamiast czytać komórki bez kontekstu.<caption> — tytuł całej tabeli, pierwsze dziecko <table>; czytane, aby zorientować użytkowników.<thead>/<tbody>/<tfoot> — grupują wiersze nagłówka, treści i podsumowania; pomagają w nawigacji i pozwalają na powtarzanie nagłówka podczas drukowania.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Tabele do układu mylą czytniki ekranu (ogłaszają semantykę tabeli danych) i są nieelastyczne. Używaj CSS Grid/Flexbox do układu strony.
Prawidłowa semantyka tabeli (<th scope>, <caption>, sekcjonowanie) to to, co czyni tabele danych użytecznymi dla użytkowników czytników ekranu — wiążą każdą wartość z jej nagłówkami wierszy i kolumn.
Zarezerwuj <table> ściśle dla prawidłowych danych tabelarycznych.