<tbody>
Główna część tabeli: grupa wierszy z danymi.
- Wyświetlanie
- table-row-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; }
tbody th { background: #38bdf833; }
</style>
<table>
<tbody>
<tr><th colspan="2" scope="rowgroup">Moduł 1: podstawy</th></tr>
<tr><td>Struktura dokumentu</td><td>ukończona</td></tr>
<tr><td>Nagłówki i akapity</td><td>ukończona</td></tr>
</tbody>
<tbody>
<tr><th colspan="2" scope="rowgroup">Moduł 2: listy i tabele</th></tr>
<tr><td>Listy</td><td>w trakcie</td></tr>
<tr><td>Tabele</td><td>zablokowana</td></tr>
</tbody>
</table>Definicja i zastosowanie
#Element <tbody> obejmuje wiersze z właściwymi danymi tabeli. Stoi po <thead> (jeśli jest) i przed <tfoot>.
Ciekawostka, która często zaskakuje: jeśli napiszesz wiersze <tr> bezpośrednio w <table>, przeglądarka sama doda wokół nich <tbody> podczas budowania drzewa DOM. Dlatego selektor CSS table > tr zwykle nic nie znajduje, a działa table > tbody > tr.
Tabela może mieć kilka elementów <tbody>. To wygodny sposób na podzielenie długiej listy wierszy na grupy, na przykład lekcje w poszczególnych modułach kursu, z osobnym nagłówkiem dla każdej grupy.
Składnia
#<tbody>
<tr>…</tr>
</tbody>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:
tbody {
display: table-row-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
#- Pisz
<tbody>jawnie. Kod jest czytelniejszy, a to, co widzisz w edytorze, zgadza się z drzewem DOM w narzędziach przeglądarki. - Paski „zebry” zrobisz selektorem
tbody tr:nth-child(even), bez dodawania klas do każdego wiersza.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.