Dostępność cyfrowa

Tabel używaj do prezentowania danych tabelarycznych, czyli takich, dla których najlepszą jest logika układu w wierszach i kolumnach. Nie stosuj tabel jako szkieletu strony.

W tabelach, w których prezentujesz dane, oznaczaj nagłówki kolumn i wierszy w kodzie HTML.

Prosta tabela ma nagłówek dla każdej kolumny lub nagłówek dla każdego wiersza. Prosta tabela nie ma zagnieżdżonych kolumn ani wierszy. Komórki nagłówka kolumn lub wierszy określ za pomocą znacznika <th>.

<table>

  <tr>

    <th>Data</th>

    <th>Nazwa wydarzenia</th>

    <th>Opis wydarzenia</th>

  </tr>

  <tr>

    <td>27 października 2022 r.</td>

    <td>Konferencja „Dostępność cyfrowa 2022”</td>

    <td>Czwarta edycja ogólnopolskiej konferencji…</td>

  </tr>

  […]

</table>

Zakres każdego nagłówka <th> możesz dodatkowo wskazać za pomocą atrybutu scope (z wartością col, gdy odnosi się do kolumny, a wartością row, gdy do wiersza).

<table>

  <tr>

    <th scope=„col”>Data</th>

    <th scope=„col”>Nazwa wydarzenia</th>

    <th scope=„col”>Opis wydarzenia</th>

  </tr>

  <tr>

    <td>27 października 2022 r.</td>

    <td>Konferencja „Dostępność cyfrowa 2022”</td>

    <td>Czwarta edycja ogólnopolskiej konferencji…</td>

  </tr>

  […]

</table>

Taka tabela może na przykład mieć jednocześnie wiersz nagłówkowy i kolumnę nagłówkową czy wielopoziomowe nagłówki.

Złożone tabele mogą być trudne do zrozumienia przez użytkowników czytników ekranu, dlatego dziel je na kilka prostych tabel. Jeśli taki podział nie jest możliwy, wtedy korzystaj ze sprawdzonych wzorców tworzenia tabel, które poleca Konsorcjum W3C.