<th> w HTML to znacznik używany do tworzenia nagłówków komórek w tabelach, dzięki któremu określone komórki są traktowane jako nagłówkowe, a ich zawartość wyróżnia się wizualnie oraz semantycznie na stronach internetowych.
Znacznik <th> (table header – nagłówek tabeli) jest kluczowym elementem każdej tabeli HTML i służy do oznaczania komórek zawierających treść nagłówkową. Domyślnie tekst w komórkach <th> jest pogrubiony i wyśrodkowany, odróżniając się w ten sposób od zwykłych komórek danych <td>, które standardowo są wyrównane do lewej i bez pogrubienia.
Zastosowanie i znaczenie <th>
- Poprawia czytelność tabel – komórki nagłówkowe ułatwiają użytkownikom szybkie zorientowanie się w strukturze i przeznaczeniu kolumn oraz wierszy;
- Wspiera dostępność WCAG – przeglądarki oraz czytniki ekranu rozpoznają
<th>jako komórki nagłówkowe, umożliwiając użytkownikom korzystającym z technologii asystujących lepsze zrozumienie i nawigację w tabeli; - Wzmacnia semantykę dokumentu – kod staje się bardziej zrozumiały zarówno dla ludzi, jak i dla wyszukiwarek internetowych.
Przykład podstawowej tabeli z <th>
<table>
<tr>
<th>Miesiąc</th>
<th>Oszczędności</th>
</tr>
<tr>
<td>Styczeń</td>
<td>100 zł</td>
</tr>
<tr>
<td>Luty</td>
<td>80 zł</td>
</tr>
</table>
W powyższym przykładzie, pierwszy wiersz zawiera komórki <th>, które pełnią funkcję nagłówków kolumn dla tabeli.
Najczęściej wykorzystywane atrybuty <th>
Znacznik <th> można rozbudowywać za pomocą atrybutów:
- scope – określa, czy komórka jest nagłówkiem kolumny (
col), wiersza (row) lub grupy;
Przykład:
<th scope="col">Produkt</th>
<th scope="row">Suma</th>
- colspan / rowspan – pozwalają łączyć komórki nagłówkowe w poziomie (
colspan) lub pionie (rowspan);
Przykład:
<th colspan="2">Podsumowanie</th>
- abbr – definiuje skróconą wersję nagłówka, przydatną dla czytników ekranu;
- headers – łączy komórkę danych z odpowiednimi nagłówkami w złożonych tabelach.
Przykłady wykorzystania <th> dla różnych struktur tabeli
Nagłówki dla kolumn –
<tr>
<th>Nazwa</th>
<th>Cena</th>
<th>Ilość</th>
</tr>
Nagłówki dla wierszy –
<tr>
<th scope="row">Suma</th>
<td>150 zł</td>
<td>4</td>
</tr>
Łączenie komórek nagłówkowych –
<tr>
<th colspan="3">Podsumowanie roczne</th>
</tr>
Najważniejsze zasady użycia <th>
- Stosuj
<th>zawsze dla nagłówków tabeli (kolumn i wierszy), nie dla zwykłych danych. - Umieszczaj
<th>w pierwszym wierszu (nagłówki kolumn) lub pierwszej kolumnie (nagłówki wierszy) – zapewnia to czytelność i dostępność tabel. - Nigdy nie używaj
<th>tylko ze względu na pogrubienie tekstu – służy on wyłącznie do tworzenia semantycznych nagłówków tabel.
Podsumowanie praktyczne
Znacznik <th> stanowi fundament semantycznej i dostępnej tabeli HTML. Jego właściwe wykorzystanie przekłada się na przejrzystość kodu, wyższą czytelność prezentowanych danych oraz zapewnienie zgodności z wytycznymi dostępności WCAG. Dzięki atrybutom takim jak scope, rowspan i colspan, możliwe jest tworzenie zarówno prostych, jak i zaawansowanych układów tabelarycznych, które będą czytelne i intuicyjne dla każdego odbiorcy, w tym również osób korzystających z czytników ekranu.
