Poznaj Programowanie

Tagi HTML: table

Piotr Grochal 8 min. czytania

Tabele to jeden z fundamentalnych elementów HTML, umożliwiający organizację i prezentację danych w uporządkowany sposób. Tworzenie dobrze zorganizowanych i dostępnych tabel wymaga jednak znajomości odpowiednich tagów, atrybutów i zasad dostępności.

Dobrze zaprojektowana tabela jest czytelna, semantyczna i przyjazna dla czytników ekranu – dzięki temu ułatwia analizę danych każdemu użytkownikowi.

Podstawowe elementy tabeli

Tag <table> – główny kontener

Tag <table> definiuje główny kontener tabeli i wyznacza początek oraz koniec jej struktury w HTML. Przykład użycia:

<table>
<!-- Zawartość tabeli -->
</table>

Tag <tr> – wiersze tabeli

Tag <tr> (table row) tworzy wiersz tabeli, w którym umieszczamy komórki danych (<td>) lub komórki nagłówkowe (<th>).

Tag <td> – komórki danych

Tag <td> (table data) definiuje zwykłą komórkę tabeli zawierającą treść – to podstawowy nośnik danych w wierszach.

Tag <th> – komórki nagłówka

Tag <th> (table header) tworzy komórkę nagłówka. W przeciwieństwie do <td>, nagłówki są domyślnie pogrubione i wyróżnione wizualnie, co poprawia czytelność tabeli.

Prosta tabela – przykład

Oto podstawowy przykład tabeli z nagłówkami i danymi:

<table>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>30</td>
</tr>
<tr>
<td>Anna</td>
<td>Nowak</td>
<td>25</td>
</tr>
</table>

Zaawansowana struktura tabeli

Bardziej rozbudowane tabele mogą korzystać z elementów: <thead>, <tbody> i <tfoot>, które grupują logicznie sekcje tabeli i ułatwiają jej stylowanie oraz dostępność.

Tag <thead> – nagłówek tabeli

Tag <thead> grupuje zawartość nagłówkową tabeli i zazwyczaj zawiera jeden wiersz nagłówków kolumn.

Tag <tbody> – treść tabeli

Tag <tbody> oznacza główną część danych – to w nim umieszczamy wiersze z właściwą treścią tabeli.

Tag <tfoot> – stopka tabeli

Tag <tfoot> definiuje stopkę tabeli, często z podsumowaniami, sumami lub metadanymi.

Rozbudowana tabela – przykład kompletnej struktury

Oto przykład tabeli z pełną strukturą obejmującą <thead>, <tbody> i <tfoot>:

<table border="1">
<thead>
<tr>
<th>LP.</th>
<th>Imię i nazwisko</th>
<th>Lubiany napój</th>
<th>Lubiany posiłek</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jan Kowal</td>
<td>Kawa</td>
<td>Pizza</td>
</tr>
<tr>
<td>2</td>
<td>Marek Koleś</td>
<td>Cola</td>
<td>Czekolada</td>
</tr>
<tr>
<td>3</td>
<td>Andrzej Nicpoń</td>
<td>Piwo</td>
<td>Pizza</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Suma: 3 osoby</td>
</tr>
</tfoot>
</table>

Zaawansowane atrybuty tabel

Atrybut colspan – scalanie kolumn

Atrybut colspan pozwala scalić komórkę w poziomie, rozciągając ją na zadaną liczbę kolumn. Przykład:

<table border="1">
<tr>
<th colspan="2">Nagłówek Kolumny 1 i 2</th>
<th>Nagłówek Kolumny 3</th>
</tr>
<tr>
<td>Komórka 1</td>
<td>Komórka 2</td>
<td>Komórka 3</td>
</tr>
</table>

Atrybut rowspan – scalanie wierszy

Atrybut rowspan łączy komórki w pionie, rozciągając daną komórkę na kilka wierszy. Przykład:

<table border="1">
<tr>
<td rowspan="2">Scalona Komórka 1</td>
<td>Komórka 2</td>
<td>Komórka 3</td>
</tr>
<tr>
<td>Komórka 4</td>
<td>Komórka 5</td>
</tr>
</table>

Tag <caption> – tytuł tabeli

Tag <caption> dodaje zwięzły tytuł lub opis, zwykle wyświetlany nad tabelą, co poprawia kontekst i dostępność. Przykład:

<table>
<caption>Ulubione napoje i posiłki</caption>
<tr>
<th>Osoba</th>
<th>Napój</th>
</tr>
<!-- pozostała zawartość -->
</table>

Stylizacja tabel za pomocą CSS

Podział tabeli na <thead>, <tbody> i <tfoot> ułatwia selektywne stylowanie. Poniżej przykładowe reguły i struktura:

<style>
table, th, td {
border: 1px solid black;
padding: 10px;
}
thead {
background-color: #4CAF50;
color: white;
}
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
tfoot {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
</style>

<table>
<thead>
<tr>
<th>Kolumna 1</th>
<th>Kolumna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dane 1</td>
<td>Dane 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Podsumowanie</td>
</tr>
</tfoot>
</table>

Dodatkowe elementy tabeli

Tag <colgroup> i <col> – grupowanie kolumn

Tag <colgroup> pozwala grupować kolumny w celu stylowania całych kolumn, a element <col> definiuje właściwości pojedynczej kolumny. Przykład:

<table border="1">
<colgroup>
<col style="background-color: yellow;">
<col style="background-color: lightblue;" span="2">
</colgroup>
<tr>
<th>Kolumna 1</th>
<th>Kolumna 2</th>
<th>Kolumna 3</th>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
</table>

Manipulacja tabelami za pomocą JavaScript

Struktura z <thead>, <tbody> i <tfoot> ułatwia selektywne operacje, np. nadawanie interakcji tylko wierszom w <tbody> lub formatowanie stopki. Przykład prostych zdarzeń:

// Pobranie wszystkich wierszy z tbody
const bodyRows = document.querySelectorAll('tbody tr');

// Dodanie nasłuchiwacza zdarzeń na każdy wiersz
bodyRows.forEach(row => {
row.addEventListener('click', function() {
this.style.backgroundColor = '#e0e0e0';
});
});

// Pobranie stopki tabeli
const footer = document.querySelector('tfoot');
footer.style.fontWeight = 'bold';

Dostępność tabel – WCAG 2.1

Dostępność (WCAG) to kluczowy aspekt w projektowaniu tabel. Stosuj poniższe praktyki, aby treści były zrozumiałe dla czytników ekranu:

  • używanie <th> z atrybutem scope dla jasnego powiązania nagłówków z danymi,
  • dodawanie <caption> z krótkim, opisowym tytułem tabeli,
  • stosowanie logicznej struktury z <thead>, <tbody> i <tfoot>,
  • unikanie niejednoznacznych danych bez wyraźnych nagłówków.

Przykład minimalnej, semantycznej tabeli zgodnej z WCAG:

<table>
<caption>Dane sprzedażowe Q1 2026</caption>
<thead>
<tr>
<th scope="col">Miesiąc</th>
<th scope="col">Przychód</th>
<th scope="col">Zysk</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Styczeń</th>
<td>50000</td>
<td>15000</td>
</tr>
</tbody>
</table>

Podsumowanie najważniejszych tagów

Poniżej znajdziesz szybkie zestawienie kluczowych tagów tabeli i ich przeznaczenia:

Tag Przeznaczenie
<table> Główny kontener tabeli
<tr> Definiuje wiersz tabeli
<th> Komórka nagłówka tabeli
<td> Komórka danych tabeli
<thead> Nagłówek tabeli
<tbody> Treść właściwa tabeli
<tfoot> Stopka tabeli
<caption> Tytuł lub opis tabeli
<colgroup> Grupowanie kolumn
<col> Stylizacja pojedynczej kolumny