Tabela HTML, która działa także na telefonie i dla czytnika ekranu

Dobra tabela łączy dane, nagłówki i sensowny układ na małym ekranie

• oznacza komórkę nagłówkową, a komórkę z danymi.
• nadaje tabeli tytuł, który pomaga rozpoznać jej temat.
• scope="col" i scope="row" wskazują, do jakich danych odnosi się nagłówek.
• Porównuj kilka rekordów i te same cechy w tabeli; dla pojedynczych opisów wybierz zwykłą treść lub listę.
• Na telefonie możesz przewijać szeroką tabelę poziomo albo przeprojektować jej układ w CSS.

Wiersze opisują rekordy, a kolumny wspólne cechy

Wyobraź sobie porównanie trzech abonamentów: każdy plan ma cenę, limit danych i informację o umowie. Tabela pasuje tu naturalnie, bo każdy wiersz opisuje jeden plan, a każda kolumna tę samą cechę. Standard HTML definiuje

jako strukturę do prezentowania danych w układzie siatki, nie jako narzędzie do ustawiania elementów strony. ([html.spec.whatwg.org](https://html.spec.whatwg.org/multipage/tables.html?utm_source=openai))

Właśnie ta granica zapobiega częstemu błędowi. Jeśli chcesz ustawić menu, kartę produktu obok zdjęcia albo dwie kolumny tekstu, użyj CSS Grid lub Flexbox; tabelaryczny układ udaje wtedy dane i komplikuje nawigację technologiom asystującym. Tabela powinna odpowiadać relacji między danymi, a nie wyglądowi projektu.

Minimalna tabela potrzebuje nagłówków, nie ozdobnych komórek

Najprostszy kod jest czytelny, kiedy od razu widać, co jest nagłówkiem, a co wartością. Poniższy przykład porównuje plany, a nazwa każdego planu pełni funkcję nagłówka wiersza:

Porównanie planów

Plan	Cena miesięczna	Limit danych
Start	29 zł	20 GB
Plus	49 zł	Bez limitu

grupuje wiersz nagłówków, zawiera główną część danych, a tworzy wiersz. W kolumnach opisujących wartości używaj ; dla nagłówków stosuj i określ kierunek relacji przez scope. W przykładzie nagłówek „Start” opisuje cały wiersz, a „Cena miesięczna” całą kolumnę.

Znacznik krótko nazywa tabelę. Nie zastępuj go samym pogrubionym tekstem nad siatką, jeśli tytuł ma być programowo powiązany z tabelą. Samouczek WAI organizacji W3C wyjaśnia, że relacje między nagłówkami i danymi pozwalają technologiom asystującym przekazywać kontekst podczas poruszania się po komórkach.

Przy dwóch kierunkach nagłówków wskaż, czego dotyczą

Gdy odczytujesz komórkę „49 zł”, powinno być jasne, że dotyczy planu Plus i ceny miesięcznej. W prostej tabeli z nagłówkiem kolumny i nagłówkiem wiersza atrybuty scope="col" oraz scope="row" jasno zapisują tę relację w kodzie. To szczególnie przydatne, gdy kolejność odczytu nie jest widoczna, jak w przypadku czytnika ekranu.

Uważam, że dodanie scope w małej tabeli porównawczej jest rozsądnym nawykiem: kosztuje niewiele, a intencję autora widać bez zgadywania. W bardziej złożonej siatce, z wielopoziomowymi nagłówkami lub grupami kolumn, samo scope może nie wystarczyć. Wtedy użyj identyfikatorów nagłówków i powiąż z nimi komórki przez headers, zamiast liczyć na sam wygląd.

Rozpoznanie problemu ułatwia mały test: jeśli po odczytaniu samej wartości nie wiadomo, do jakiego wiersza i kolumny należy, struktura nagłówków wymaga poprawy. Pomocą może być osobny nagłówek wiersza albo jawne powiązanie komórki z kilkoma nagłówkami.

Na telefonie wybierz przewijanie albo układ kart

Szeroka tabela na ekranie telefonu szybko staje się niewygodna, ale ukrycie części kolumn zwykle usuwa dane potrzebne do porównania. Dla zestawienia planów najprostszy kompromis to poziome przewijanie w opakowującym elemencie, z widocznym sygnałem, że tabela ma dalszą zawartość:

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.table-scroll table {
  min-width: 36rem;
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
  padding: 0.75rem;
  border: 1px solid #bbb;
  text-align: left;
}

Próg decyzji jest praktyczny: gdy użytkownik ma porównać te same wartości w kilku wierszach, zachowaj siatkę i umożliw przewijanie. Jeśli każda pozycja zawiera długi, samodzielny opis, zamień ją na kartę lub listę dostosowaną do małego ekranu. Rozbijanie tabeli na karty wymaga starannego CSS, by relacje nagłówków nadal były zrozumiałe.

Treść powie, czy potrzebujesz tabeli, czy listy

Sprawdź, czy dane mają wspólne cechy i czytelnik będzie je porównywać. Jeśli tak, tabela ułatwia szybkie skanowanie wartości; jeśli treść układa się w kroki lub niezależne opisy, lista będzie prostsza do odczytania. Nie wciskaj tabeli w dane, które nie tworzą siatki porównań.

Sytuacja	Lepszy wybór	Powód
Porównujesz kilka planów według tych samych cech	Tabela	Wartości można zestawić w wierszach i kolumnach.
Przedstawiasz instrukcję w kolejności wykonania	Lista numerowana	Kolejność kroków jest ważniejsza niż porównanie.
Opisujesz pojedynczy produkt kilkoma zdaniami	Akapity lub karta	Treść nie tworzy regularnej siatki danych.
Tabela ma wiele poziomów nagłówków	Tabela z jawnymi powiązaniami	Rozbudowana struktura wymaga dokładnego określenia relacji.

Jeśli tabela jest złożona, dodaj krótki opis wyjaśniający jej układ i sposób czytania. Sama siatka może nie pokazać, że nagłówek obejmuje kilka grup danych; specyfikacja HTML Living Standard zwraca uwagę na potrzebę objaśniania tabel, których struktura może być trudna do zrozumienia.

Dobra tabela zaczyna się od relacji między danymi

Wróć do porównania planów na telefonie: jeśli każdy wiersz jest jednym planem, a kolumny opisują te same cechy, masz sensowną tabelę. Dodaj semantyczne nagłówki i nazwę tabeli, a przy wąskim ekranie zdecyduj, czy zachować siatkę z przewijaniem, czy przebudować ją w CSS. Najpierw uporządkuj znaczenie danych, dopiero potem ich wygląd; wtedy HTML i projekt interfejsu będą mówiły to samo.