Nagłówek, stopka, ciało tabeli (<thead>, <tfoot>, <tbody>)

Lekcja 7.2: Nagłówek, stopka, ciało tabeli (<thead>, <tfoot>, <tbody>)

Strona główna > Rozdział 7: Tabele > Nagłówek, stopka, ciało tabeli

Semantyczne grupowanie wierszy tabeli

Oprócz podstawowych znaczników <tr>, <th> i <td>, HTML oferuje trzy dodatkowe znaczniki, które pozwalają na semantyczne grupowanie wierszy tabeli w logiczne sekcje: nagłówek, ciało i stopkę. Są to:

<thead> (Table Head): Grupuje wiersze nagłówkowe tabeli. Powinien zawierać wiersze (<tr>) z komórkami nagłówkowymi (<th>), które opisują kolumny danych.
<tbody> (Table Body): Grupuje główne wiersze danych tabeli. Zawiera wiersze (<tr>) z komórkami danych (<td>). Tabela może zawierać jeden lub więcej elementów <tbody>, co pozwala na grupowanie wierszy danych w logiczne sekcje.
<tfoot> (Table Foot): Grupuje wiersze stopki tabeli. Zazwyczaj zawiera podsumowania kolumn lub inne informacje końcowe.

Używanie tych znaczników nie zmienia domyślnego wyglądu tabeli w większości przeglądarek, ale wnosi istotne korzyści semantyczne i praktyczne.

Korzyści z używania <thead>, <tbody>, <tfoot>

Semantyka: Jasno określają strukturę tabeli, informując przeglądarki, wyszukiwarki i technologie wspomagające (np. czytniki ekranu) o przeznaczeniu poszczególnych części tabeli.
Stylizacja CSS: Umożliwiają łatwiejsze i bardziej precyzyjne stylowanie różnych sekcji tabeli za pomocą CSS (np. inne tło dla nagłówka, inne dla stopki).
Dostępność: Pomagają czytnikom ekranu w nawigacji i zrozumieniu dużych tabel.
Drukowanie: Niektóre przeglądarki potrafią powtarzać zawartość <thead> i <tfoot> na każdej stronie podczas drukowania długich tabel, co ułatwia czytanie wydruku.
Przewijanie (z JavaScript/CSS): Umożliwiają (przy dodatkowym wsparciu CSS/JS) przewijanie tylko ciała tabeli (<tbody>) przy zachowaniu widoczności nagłówka (<thead>) i stopki (<tfoot>).

Struktura tabeli z <thead>, <tbody>, <tfoot>

Typowa struktura tabeli z użyciem tych znaczników wygląda następująco:

<table>
  <thead>
    <tr>
      <th>Nagłówek 1</th>
      <th>Nagłówek 2</th>
    </tr>
  </thead>
  
  <tfoot> <!-- Może być przed lub po tbody -->
    <tr>
      <td>Stopka 1</td>
      <td>Stopka 2</td>
    </tr>
  </tfoot>
  
  <tbody>
    <tr>
      <td>Dane 1.1</td>
      <td>Dane 1.2</td>
    </tr>
    <tr>
      <td>Dane 2.1</td>
      <td>Dane 2.2</td>
    </tr>
    <!-- więcej wierszy tbody -->
  </tbody>
  
  <!-- Możliwe kolejne sekcje tbody -->
  <tbody>
     <tr>
      <td>Dane 3.1</td>
      <td>Dane 3.2</td>
    </tr>
  </tbody>
</table>

Ważne zasady:

Wewnątrz <table> może znajdować się co najwyżej jeden <thead> i co najwyżej jeden <tfoot>.
Może znajdować się jeden lub więcej elementów <tbody>.
<thead> musi wystąpić przed <tbody> i <tfoot>.
<tfoot> może wystąpić przed lub po <tbody> (umieszczenie go przed <tbody> było kiedyś zalecane, aby przeglądarka mogła wyrenderować stopkę przed załadowaniem potencjalnie długiego ciała tabeli, ale obecnie nie ma to większego znaczenia praktycznego).
Jeśli te znaczniki są używane, wszystkie wiersze <tr> tabeli muszą znajdować się wewnątrz jednego z nich (nie mogą być bezpośrednio w <table>).

Przykład tabeli z semantyczną strukturą:

<table class="basic-table styled-parts">
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Ilość</th>
      <th>Cena jednostkowa (PLN)</th>
      <th>Wartość (PLN)</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3"><strong>Suma:</strong></td> <!-- colspan omówimy później -->
      <td><strong>19.10</strong></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Jabłka</td>
      <td>2 kg</td>
      <td>3.50</td>
      <td>7.00</td>
    </tr>
    <tr>
      <td>Chleb</td>
      <td>1 szt.</td>
      <td>4.20</td>
      <td>4.20</td>
    </tr>
    <tr>
      <td>Mleko</td>
      <td>3 litry</td>
      <td>2.80</td>
      <td>8.40</td>
    </tr>
  </tbody>
</table>

Wynik powyższego kodu (z dodatkowymi stylami CSS dla tła):

Produkt	Ilość	Cena jednostkowa (PLN)	Wartość (PLN)
Suma:			19.60
Jabłka	2 kg	3.50	7.00
Chleb	1 szt.	4.20	4.20
Mleko	3 litry	2.80	8.40

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Przekształć tabelę z poprzedniej lekcji (cennik produktów) tak, aby używała znaczników <thead> i <tbody>. Dodaj również sekcję <tfoot> z wierszem podsumowującym (może być to prosty tekst, np. "Koniec cennika").

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Tabela Produktów - Struktura</title>
    <style>
        table, th, td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        thead {
            background-color: #f2f2f2; font-weight: bold;
        }
        tfoot {
            background-color: #e9e9e9; font-style: italic;
        }
    </style>
</head>
<body>
    <h1>Cennik Produktów</h1>
    
    <table>
        <thead>
            <tr>
                <th>Produkt</th>
                <th>Cena (PLN)</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="2">Koniec cennika.</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Jabłka (kg)</td>
                <td>3.50</td>
            </tr>
            <tr>
                <td>Chleb</td>
                <td>4.20</td>
            </tr>
            <tr>
                <td>Mleko (litr)</td>
                <td>2.80</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Stwórz tabelę z wynikami meczów, używając <thead> dla nagłówków kolumn (np. Data, Drużyna 1, Wynik, Drużyna 2) i <tbody> dla poszczególnych meczów.
Dodaj różne style CSS dla <thead>, <tbody> i <tfoot> w stworzonej tabeli.
Spróbuj umieścić <tfoot> przed <tbody> w kodzie HTML i zobacz, czy wpłynie to na kolejność wyświetlania w przeglądarce (nie powinno).

Najczęściej zadawane pytania

Do czego służą znaczniki <thead>, <tbody>, <tfoot>?

Służą one do semantycznego grupowania wierszy tabeli (<tr>) w logiczne sekcje: nagłówek (<thead>), ciało (<tbody>) i stopkę (<tfoot>). Poprawia to strukturę, dostępność i ułatwia stylizację.

Czy użycie tych znaczników jest obowiązkowe?

Nie, nie są one obowiązkowe. Proste tabele mogą składać się tylko ze znaczników <tr>, <th> i <td>. Jednak dla bardziej złożonych tabel ich użycie jest zalecane ze względu na korzyści semantyczne i praktyczne.

Ile razy można użyć <thead>, <tbody>, <tfoot> w tabeli?

W jednej tabeli może być co najwyżej jeden <thead> i jeden <tfoot>, ale może być wiele elementów <tbody>, co pozwala grupować wiersze danych w oddzielne sekcje.

W jakiej kolejności powinny występować te znaczniki?

<thead> musi być pierwszy. <tfoot> może wystąpić bezpośrednio po <thead> lub po wszystkich <tbody>. Elementy <tbody> występują po <thead> (i ewentualnie po <tfoot>).

Jakie korzyści dają te znaczniki przy drukowaniu?

Niektóre przeglądarki potrafią automatycznie powtarzać zawartość <thead> (nagłówek) i <tfoot> (stopka) na górze i na dole każdej strony podczas drukowania długich tabel, co znacznie ułatwia czytanie wydruku.