Poznaj Programowanie

Tagi HTML: tfoot

Piotr Grochal 7 min. czytania

Witaj na moim blogu poświęconym programowaniu webowemu! Dziś zanurzymy się w świat tabel HTML, skupiając się na elemencie tfoot. Tag tfoot to klucz do semantycznej, czytelnej i dostępnej struktury tabeli, który ułatwia stylizowanie, poprawia zachowanie przy przewijaniu i gwarantuje świetne efekty podczas drukowania. W tym wpisie znajdziesz definicje, przykłady HTML/CSS oraz praktyczne zastosowania w JavaScript.

Co to jest element tfoot i po co go używać?

Element HTML tfoot definiuje stopkę tabeli (<table>). Służy do grupowania treści na dole tabeli, takich jak sumy, podsumowania czy notatki. W połączeniu z thead (nagłówek) i tbody (treść główna) tworzy spójną, semantyczną strukturę, która pomaga przeglądarkom, czytnikom ekranu i narzędziom do drukowania.

Oto kluczowe powody, dla których warto go stosować:

  • przewijanie – przeglądarki mogą utrwalić stopkę podczas przewijania ciała tabeli (tbody), podobnie jak nagłówek;
  • drukowanie – przy wydruku na wielu stronach stopka i nagłówek powtarzają się na każdej stronie;
  • dostępność – czytniki ekranu lepiej interpretują strukturę tabeli i jej sekcje;
  • stylizacja CSS – możesz niezależnie formatować thead, tbody i tfoot bez ingerencji w układ.

Bez tfoot stopka to tylko zwykłe wiersze w tbody, co ogranicza funkcjonalność i dostępność. Pamiętaj: tabela powinna mieć tylko jeden tfoot.

Kontekst użycia

Stosując tfoot, zwróć uwagę na te zasady:

  • struktura – dziecko elementu <table>, po <caption>, <colgroup>, <thead> lub <tbody>;
  • zawartość – zawiera tylko wiersze <tr>, a w nich <th> lub <td>;
  • zamykanie – znacznik </tfoot> bywa opcjonalny, jeśli nie ma treści po nim.

Podstawowy przykład użycia tfoot w HTML

Oto prosta tabela z nagłówkiem, treścią i stopką. Stopka zawiera sumę oszczędności:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład tabeli z tfoot</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Miesiąc</th>
<th>Oszczędności</th>
</tr>
</thead>
<tbody>
<tr>
<td>Styczeń</td>
<td>100 zł</td>
</tr>
<tr>
<td>Luty</td>
<td>80 zł</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Suma</strong></td>
<td><strong>180 zł</strong></td>
</tr>
</tfoot>
</table>
</body>
</html>

Efekt wizualny – stopka ląduje na dole tabeli i może pozostawać widoczna podczas przewijania długich danych. Uwaga historyczna – dawniej zalecano umieszczanie tfoot przed tbody dla druku; dziś kolejność nie wpływa na rendering w nowoczesnych przeglądarkach.

Zaawansowane stylizowanie tfoot za pomocą CSS

Domyślne style CSS dla tfoot to:

tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}

Teraz pokażemy, jak to ulepszyć – dodajmy kolory, wyrównanie i responsywność.

Przykład 1 – kolorowanie sekcji tabeli

Przykładowy CSS:

thead { color: green; background: #e0f7e0; }
tbody { color: blue; }
tfoot { color: red; background: #ffebee; font-weight: bold; font-size: 1.1em; }
table, th, td { border: 1px solid #ccc; border-collapse: collapse; padding: 8px; }

Rezultat – thead zielony, tfoot czerwony i pogrubiony – idealne do wyróżnienia podsumowania.

Przykład 2 – wyrównanie tekstu w stopce

Kod HTML:

<tfoot style="text-align: center;">
<tr>
<td>Suma</td>
<td>180 zł</td>
</tr>
</tfoot>

Alternatywa w CSS:

tfoot { text-align: right; }

Przykład 3 – wyrównanie pionowe i wysokość

Kod HTML:

<tfoot style="vertical-align: bottom;">
<tr style="height: 100px;">
<td>Suma</td>
<td>180 zł</td>
</tr>
</tfoot>

Takie ustawienia są przydatne w wysokich komórkach lub gdy podsumowanie ma „trzymać się” dołu.

Responsywna tabela z przyklejoną stopką

Dla dużych tabel możesz uzyskać efekt „przyklejonej” stopki podczas przewijania:

.tabela-responsywna {
width: 100%;
border-collapse: collapse;
}
.tabela-responsywna tfoot {
position: sticky;
bottom: 0;
background: white;
z-index: 10;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

Testuj w Chrome i Firefox – stopka „przykleja się” przy przewijaniu długich zestawień, poprawiając czytelność podsumowań.

Praktyczne przykłady – tabele finansowe i raporty

Przykład: Tabela sprzedaży z sumą i średnią

Kod HTML:

<table class="raport">
<thead>
<tr><th>Produkt</th><th>Cena</th><th>Ilość</th><th>Wartość</th></tr>
</thead>
<tbody>
<tr><td>Laptop</td><td>3000 zł</td><td>2</td><td>6000 zł</td></tr>
<tr><td>Myszka</td><td>50 zł</td><td>10</td><td>500 zł</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3"><strong>Razem</strong></td><td><strong>6500 zł</strong></td></tr>
<tr><td colspan="3"><strong>Średnia</strong></td><td><strong>3250 zł</strong></td></tr>
</tfoot>
</table>

Wskazówka – użyj colspan="3", aby scalić komórki i wyrównać podpis podsumowania do ostatniej kolumny.

Dla druku warto dodać reguły mediów, by nagłówki i stopki powtarzały się na każdej stronie:

@media print {
tfoot { display: table-footer-group; }
thead { display: table-header-group; }
}

Dzięki temu stopka pojawi się na każdej stronie wydruku razem z nagłówkiem tabeli.

Integracja z JavaScript – dynamiczne podsumowania

tfoot świetnie współpracuje z JavaScriptem przy obliczaniu sum i średnich w locie.

Kod HTML i JS do automatycznego wyliczania sumy w stopce:

<table id="tabela-danych">
<!-- thead i tbody jak wyżej -->
<tfoot>
<tr>
<td><strong>Suma</strong></td>
<td id="suma">0 zł</td>
</tr>
</tfoot>
</table>

<script>
function obliczSume() {
const wiersze = document.querySelectorAll('#tabela-danych tbody tr');
let suma = 0;
wiersze.forEach((wiersz) => {
// Wartość w 4. kolumnie (indeks 3)
const tekst = wiersz.cells[3].textContent.replace(' zł', '').replace(',', '.');
const wartosc = parseFloat(tekst) || 0;
suma += wartosc;
});
document.getElementById('suma').textContent = suma + ' zł';
}
obliczSume(); // Wywołaj po załadowaniu
</script>

Rozszerzenie – dodaj nasłuchiwanie zdarzenia input do edytowalnych komórek, aby sumy aktualizowały się na żywo wraz ze zmianą danych.

Starsze atrybuty (przestarzałe) i współczesne alternatywy

W HTML4 istniały atrybuty jak align="center", valign="bottom" czy charoff – nie używaj ich. Są przestarzałe i powinny zostać zastąpione CSS (np. text-align, vertical-align). Współcześnie używamy wyłącznie atrybutów globalnych (class, id, style) oraz zdarzeniowych (np. onclick). Interfejs DOM: HTMLTableSectionElement.

Najczęstsze błędy i dobre praktyki

Poniżej znajdziesz praktyczne wskazówki, które pomogą uniknąć problemów w produkcyjnych tabelach:

  • błąd – umieszczenie tfoot przed tbody; historycznie dopuszczalne, ale dla spójności i czytelności lepiej trzymać stopkę po treści głównej;
  • błąd – brak wierszy <tr> w tfoot; stopka musi składać się z wierszy z komórkami <th> lub <td>;
  • praktyka – zawsze łącz thead, tbody i tfoot, aby zapewnić pełną semantykę i lepszą dostępność;
  • dla dużych danych – na kontenerze tabeli stosuj overflow: auto, aby wiersze przewijały się niezależnie od nagłówka i stopki;
  • dostępność – w stopce stosuj <th> dla podpisów podsumowań oraz uzupełniaj opisy ARIA (np. aria-label), by pomóc czytnikom ekranu;
  • wydajność – nawet przy tysiącach wierszy użycie tfoot nie powoduje zauważalnych spadków wydajności.

Testuj w narzędziach developerskich – sprawdzaj poprawność w Validatorze W3C i oceniaj dostępność przy pomocy Lighthouse.