<thead>
Grupa wierszy z nagłówkami kolumn tabeli.
- Wyświetlanie
- table-header-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; }
thead { background: #8b5cf633; }
</style>
<table>
<thead>
<tr>
<th scope="col">Lekcja</th>
<th scope="col">Czas</th>
</tr>
</thead>
<tbody>
<tr><td>Znaczniki i atrybuty</td><td>12 min</td></tr>
<tr><td>Listy</td><td>9 min</td></tr>
</tbody>
</table>Definicja i zastosowanie
#Element <thead> obejmuje wiersz (lub kilka wierszy) z nagłówkami kolumn. Stoi w tabeli po <caption> i <colgroup>, a przed <tbody>. W środku umieszczasz elementy <tr>, a w nich zwykle komórki <th>.
Podział na <thead>, <tbody> i <tfoot> porządkuje tabelę i ułatwia stylowanie. Przykładowo reguła thead th { position: sticky; top: 0; } przykleja nagłówki do górnej krawędzi przewijanego kontenera.
Podczas drukowania długiej tabeli przeglądarki mogą powtarzać <thead> na początku każdej strony, więc czytelnik nie gubi nazw kolumn.
Składnia
#<thead>
<tr>
<th>…</th>
</tr>
</thead>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:
thead {
display: table-header-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
#- W tabeli może być tylko jeden
<thead>. - Samo umieszczenie wiersza w
<thead>nie wystarczy. Komórki nagłówkowe nadal zapisuj jako<th>.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.