PricingLoginStart free
HTML Academy · Lekcja

Struktura thead, tbody i tfoot

Organizować wiersze tabeli w semantyczne sekcje nagłówka, treści i stopki.

Lekcja 2 z 414 kroki

Struktura thead, tbody i tfoot to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Sekcje tabeli

Kompletna tabela HTML ma trzy opcjonalne, ale zalecane sekcje:

  • <thead> — wiersze nagłówków
  • <tbody> — wiersze treści (główne dane)
  • <tfoot> — wiersze stopki (sumy, podsumowania)

thead

Element <thead> obejmuje wiersze nagłówków:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

Element <tbody> obejmuje główne wiersze danych:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

Element <tfoot> obejmuje wiersze stopki — zwykle zawierające sumy lub podsumowania:

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

Kompletna strukturalna tabela

Pełna tabela ze wszystkimi trzema sekcjami:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

Dlaczego używać thead/tbody/tfoot?

Korzyści ze struktury tabeli:

  • Semantyka — czytniki ekranu rozumieją różnicę między nagłówkami, danymi a podsumowaniem
  • Wybieranie za pomocą CSS — niezależne stylizowanie sekcji
  • Drukowanie — thead powtarza się na każdej drukowanej stronie
  • Przewijanie — tbody można przewijać niezależnie za pomocą CSS overflow

Przewijalny tbody

Spraw, aby przewijała się tylko treść tabeli, a nagłówek pozostał nieruchomy:

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

Niejawny tbody

Jeśli pominiesz <tbody>, przeglądarka doda go automatycznie:

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

Wiele elementów tbody

Tabela może zawierać wiele grup <tbody>:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

Stylizowanie sekcji tabeli

Wybieraj sekcje za pomocą CSS:

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

Działanie czytników ekranu

Przy prawidłowej strukturze thead/tbody czytniki ekranu mogą:

  • Podawać nagłówki kolumn jako kontekst dla każdej komórki danych
  • Przechodzić między sekcjami (obszar nagłówka i obszar danych)
  • Informować użytkowników o liczbie wierszy i kolumn

Wiersze thead z wieloma wierszami

thead może zawierać wiele wierszy dla złożonych nagłówków:

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

Szybkie sprawdzenie

Gdzie element tfoot zazwyczaj znajduje się w kodzie HTML w porównaniu z wyrenderowaną tabelą?

Odpowiedz w interaktywnej lekcji

Podsumowanie: thead tbody tfoot

Najważniejsze informacje o strukturze tabel:

  • <thead> — wiersze nagłówków (powtarzają się podczas drukowania)
  • <tbody> — wiersze danych (może być ich wiele)
  • <tfoot> — wiersze podsumowań lub sum
  • Umożliwia wybieranie sekcji za pomocą CSS i dostępne odczytywanie tabel
  • Zawsze zapisuj tbody jawnie, mimo że przeglądarki dodają je automatycznie
Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
40
Lekcje
159
Zacznij naukę bezpłatnieWyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Struktura thead, tbody i tfoot” jest bezpłatna?

Tak — pełny tekst „Struktura thead, tbody i tfoot” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Struktura thead, tbody i tfoot”?

Organizować wiersze tabeli w semantyczne sekcje nagłówka, treści i stopki. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Struktura thead, tbody i tfoot”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. table, tr, td i th
  2. Struktura thead, tbody i tfoot
  3. colspan i rowspan do łączenia komórek
  4. Dostępność tabel: scope, summary i caption
← Powrót do HTML Academy