Poznaj Programowanie

Tagi HTML: th

Piotr Grochal 7 min. czytania

Element <th> to kluczowy znacznik HTML tworzący komórki nagłówkowe w tabelach. Reprezentuje nagłówek wiersza lub kolumny, co poprawia czytelność oraz semantykę tabel, a przeglądarki domyślnie pogrubiają jego treść i wyrównują ją do środka.

W tym wpisie o HTML/CSS/JavaScript poznasz wszystko, co warto wiedzieć o <th> – od składni i atrybutów, przez praktyczne przykłady, po stylizację i interakcje z JavaScriptem. Dzięki poprawnemu użyciu <th> zbudujesz dostępne, responsywne i łatwe w obsłudze tabele.

Czym jest element <th> i do czego służy?

<th> (table header) definiuje komórkę nagłówkową w tabeli HTML. W odróżnieniu od <td>, sygnalizuje przeglądarce i czytnikom ekranu, że zawiera etykietę opisującą dane w kolumnie lub wierszu. To fundament semantycznego HTML, który bezpośrednio wpływa na dostępność (a11y) i SEO.

Przeglądarki stosują następujące style domyślne dla <th>:

  • treść pogrubiona (font-weight: bold),
  • wyrównanie poziome do środka (text-align: center),
  • wyrównanie pionowe do środka (vertical-align: middle).

Element <th> musi znajdować się wewnątrz <tr>, a cała struktura w <table>. Nie ma obowiązkowych atrybutów – może zawierać tekst lub elementy inline.

Przykładowa minimalna deklaracja wygląda tak:

<th>Nagłówek kolumny</th>

W HTML możesz pominąć znacznik zamykający </th>, jeśli bezpośrednio po nim występuje inny <th>, <td> lub koniec wiersza/rodzica.

Atrybuty elementu <th> – jak rozszerzyć funkcjonalność?

Poza atrybutami globalnymi (class, id, style) i zdarzeniowymi (onclick) <th> obsługuje kluczowe atrybuty tabelowe:

  • abbr – skrócony opis odczytywany przez technologie asystujące, nie jest wyświetlany wizualnie;
  • colspan – liczba kolumn, które obejmuje komórka (domyślnie 1);
  • rowspan – liczba wierszy, które obejmuje komórka (domyślnie 1);
  • headers – lista ID komórek nagłówkowych, do których odnosi się dana komórka (złożone tabele);
  • scope – zakres nagłówka: row, col, rowgroup, colgroup.

Tak zapiszesz <th> z najczęściej używanymi atrybutami:

<table>
<tr>
<th scope="col" abbr="Liczba sztuk">Ilość</th>
<th colspan="2" scope="colgroup">Owoce</th>
</tr>
</table>

Pierwszy nagłówek opisuje kolumnę, a drugi obejmuje dwie kolumny w tej samej grupie.

Podstawowe przykłady użycia <th>

Najczęściej umieszcza się nagłówki kolumn w pierwszym wierszu tabeli. Poniżej minimalny przykład kodu:

<table>
<tr>
<th>Przedmiot</th>
<th>Ilość</th>
</tr>
<tr>
<td>Ananas</td>
<td>10</td>
</tr>
</table>

Tak wygląda wynik w przeglądarce:

Przedmiot Ilość
Ananas 10

Gdy chcesz dodać nagłówki wierszy, użyj atrybutu scope="row":

<table>
<tr>
<th></th>
<th>Czerwone</th>
<th>Zielone</th>
</tr>
<tr>
<th scope="row">Owoce</th>
<td>Truskawka</td>
<td>Kiwi</td>
</tr>
</table>

Oto prosty rezultat z nagłówkiem wiersza:

Czerwone Zielone
Owoce Truskawka Kiwi

Zaawansowane przykłady – rowspan, colspan i headers

Łączenie komórek atrybutami rowspan i colspan pozwala budować czytelne, wielopoziomowe tabele. Oto przykładowa struktura:

<table>
<tr>
<th rowspan="2">Kategoria</th>
<th colspan="3">Owoce A–I</th>
</tr>
<tr>
<th>Ananas</th>
<th>Banan</th>
<th>Cytryna</th>
</tr>
<tr>
<th rowspan="2">Jadalne</th>
<td>5</td>
<td>8</td>
<td>3</td>
</tr>
</table>

W złożonych tabelach warto jawnie powiązać komórki danych z nagłówkami za pomocą headers i identyfikatorów:

<table>
<tr>
<th id="klasa">Klasa</th>
<th id="typy">Typy</th>
</tr>
<tr>
<th headers="klasa">1</th>
<td headers="typy klasa">A</td>
</tr>
</table>

Stylizacja <th> z CSS – responsywne tabele

Domyślne style są w porządku, ale CSS pozwala je łatwo dopasować do projektu. Przykładowe reguły zmieniające wygląd nagłówków:

th {
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 12px;
text-align: left; /* nadpisuje domyślne center */
}
@media (max-width: 600px) {
table, th, td {
font-size: 14px;
}
th {
writing-mode: vertical-rl; /* pionowe nagłówki na małych ekranach */
}
}

A tak może wyglądać uproszczony szablon HTML + CSS do szybkiego startu:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Tabele z nagłówkami</title>
<style>
/* wklej reguły CSS z poprzedniego bloku */
</style>
</head>
<body>
<table class="responsywna">
<tr><th>Przedmiot</th><th>Ilość</th></tr>
<tr><td>Ananas</td><td>10</td></tr>
</table>
</body>
</html>

Interaktywne tabele z JavaScriptem i <th>

Dodaj akcje po kliknięciu w <th>, aby włączać sortowanie lub filtrowanie danych. Oto prosty przykład sortowania po kolumnie:

<table id="tabela">
<tr>
<th onclick="sortuj(0)">Imię ↑↓</th>
<th onclick="sortuj(1)">Wiek</th>
</tr>
<tr><td>Anna</td><td>25</td></tr>
<tr><td>Jan</td><td>30</td></tr>
</table>

<script>
function sortuj(kolumna) {
const tbody = document.querySelector('#tabela');
const rows = Array.from(tbody.querySelectorAll('tr:nth-child(n+2)'));
rows.sort((a, b) => a.cells[kolumna].textContent.localeCompare(b.cells[kolumna].textContent, 'pl', {numeric: true}));
rows.forEach(row => tbody.appendChild(row));
}
</script>

Jeśli chcesz dodać filtrowanie, skorzystaj z obsługi zdarzeń na nagłówku:

document.querySelector('th').addEventListener('click', () => {
// tu zaimplementuj logikę filtrowania na podstawie tekstu w nagłówku
});

Najczęstsze błędy i dobre praktyki

Poniżej znajdziesz esencję najważniejszych zaleceń dotyczących <th> w realnych projektach:

  • Błąd – używanie <th> zamiast <td> dla komórek z danymi;
  • Błąd – pomijanie scope w złożonych tabelach, co utrudnia nawigację czytnikom ekranu;
  • Praktyka – stosuj logiczną strukturę tabel, np. pierwszy wiersz z nagłówkami kolumn i pierwszy element wiersza jako nagłówek wiersza;
  • Dostępność – testuj z NVDA lub VoiceOver, korzystaj z abbr i powiązań headers tam, gdzie to potrzebne;
  • Responsywność – na małych ekranach rozważ alternatywne prezentacje (np. karty lub listy generowane CSS/JS), gdy dane są bardzo gęste;
  • ARIA – w razie potrzeby doprecyzuj role, np. role="columnheader" lub role="rowheader", zgodnie z wymaganiami dostępności.