<tfoot>
Stopka tabeli: wiersze z podsumowaniem, sumami lub uwagami do kolumn.
- Wyświetlanie
- table-footer-group
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy
<tr>
Przykład
#<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; text-align: left; }
tfoot { font-weight: bold; }
</style>
<table>
<thead>
<tr><th scope="col">Lekcja</th><th scope="col">Czas</th></tr>
</thead>
<tbody>
<tr><td>Formularze</td><td>15 min</td></tr>
<tr><td>Pola tekstowe</td><td>10 min</td></tr>
<tr><td>Przyciski</td><td>8 min</td></tr>
</tbody>
<tfoot>
<tr><th scope="row">Razem</th><td>33 min</td></tr>
</tfoot>
</table>Definicja i zastosowanie
#Element <tfoot> zawiera wiersze, które podsumowują kolumny: sumy, średnie, łączny czas. W kodzie umieszczasz go na końcu tabeli, po <tbody>.
Przeglądarka zawsze rysuje stopkę na dole tabeli, a przy drukowaniu długiej tabeli może powtarzać ją na każdej stronie, podobnie jak <thead>.
Stopka tabeli to nie miejsce na informacje dotyczące całej strony. Trafia do niej tylko to, co odnosi się do kolumn tej konkretnej tabeli.
Składnia
#<tfoot>
<tr>…</tr>
</tfoot>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
tfoot {
display: table-footer-group;
vertical-align: middle;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Komórkę z etykietą podsumowania, na przykład „Razem”, zapisz jako
<th scope="row">. - W tabeli może być tylko jeden
<tfoot>.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.