<th>
Komórka nagłówkowa tabeli: nazwa kolumny lub wiersza.
- Wyświetlanie
- table-cell
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu bez nagłówków, elementów sekcji,
<header>i<footer>
Przykład
#<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; }
</style>
<table>
<tr>
<th scope="col">Kurs</th>
<th scope="col">Lekcje</th>
<th scope="col">Wynik testu</th>
</tr>
<tr>
<th scope="row">HTML i CSS</th>
<td>24</td>
<td>92%</td>
</tr>
<tr>
<th scope="row">JavaScript</th>
<td>32</td>
<td>78%</td>
</tr>
</table>Definicja i zastosowanie
#Element <th> (od table header) to komórka z nagłówkiem, czyli opisem tego, co oznaczają dane w kolumnie albo w wierszu. Przeglądarka domyślnie pogrubia jej treść i wyśrodkowuje ją w poziomie.
Atrybut scope mówi, czego dotyczy nagłówek: kolumny (col) czy wiersza (row). Dzięki temu czytnik ekranu, odczytując komórkę z wartością 92%, poda też nagłówki „Wynik testu” i „HTML i CSS”, a nie samą liczbę.
W prostych tabelach wystarczy scope. W złożonych, gdzie komórka należy do kilku nagłówków naraz, połączysz ją z nimi atrybutem headers na <td>, wskazując identyfikatory właściwych <th>.
Składnia
#<th scope="col">Nazwa kolumny</th>Atrybuty
#col | row | colgroup | rowgroup
Określa, których komórek dotyczy nagłówek:colkolumny pod nim,rowwiersza obok niego, acolgroupirowgroupcałej grupy kolumn lub wierszy. Bez tego atrybutu przeglądarka próbuje zgadnąć, co nie zawsze się udaje.liczba dodatnia (domyślnie 1)
Liczba kolumn, które zajmuje komórka. Przydaje się dla nagłówka, który obejmuje kilka kolumn naraz.liczba nieujemna (domyślnie 1)
Liczba wierszy, które zajmuje komórka. Nagłówek wiersza rozciągnięty na kilka wierszy dobrze grupuje powiązane dane.abbr
tekst
Krótsza wersja treści nagłówka. Czytnik ekranu może jej użyć, gdy powtarza nagłówek przy kolejnych komórkach, na przykładabbr="Cena"dla nagłówka „Cena miesięczna brutto”.headers
lista identyfikatorów
Identyfikatory innych nagłówków<th>, którym podlega ten nagłówek, rozdzielone spacjami. Potrzebny tylko w złożonych tabelach z nagłówkami na kilku poziomach.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#scope
col | row | colgroup | rowgroupOkreśla, których komórek dotyczy nagłówek: col kolumny pod nim, row wiersza obok niego, a colgroup i rowgroup całej grupy kolumn lub wierszy. Bez tego atrybutu przeglądarka próbuje zgadnąć, co nie zawsze się udaje.
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; text-align: left; }
</style>
<table>
<tr><th scope="row">E-mail</th><td>ania@example.com</td></tr>
<tr><th scope="row">Miasto</th><td>Kraków</td></tr>
<tr><th scope="row">Poziom</th><td>7</td></tr>
</table>colspan
liczba dodatnia (domyślnie 1)Liczba kolumn, które zajmuje komórka. Przydaje się dla nagłówka, który obejmuje kilka kolumn naraz.
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; }
</style>
<table>
<tr>
<th rowspan="2" scope="col">Uczeń</th>
<th colspan="2" scope="col">Wynik quizu</th>
</tr>
<tr>
<th scope="col">HTML</th>
<th scope="col">CSS</th>
</tr>
<tr><td>Ola</td><td>9/10</td><td>8/10</td></tr>
<tr><td>Kuba</td><td>7/10</td><td>9/10</td></tr>
</table>rowspan
liczba nieujemna (domyślnie 1)Liczba wierszy, które zajmuje komórka. Nagłówek wiersza rozciągnięty na kilka wierszy dobrze grupuje powiązane dane.
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; text-align: left; }
</style>
<table>
<tr><th rowspan="2" scope="row">Moduł 1</th><td>Znaczniki</td></tr>
<tr><td>Atrybuty</td></tr>
<tr><th rowspan="2" scope="row">Moduł 2</th><td>Listy</td></tr>
<tr><td>Tabele</td></tr>
</table>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
th {
display: table-cell;
padding: 1px;
font-weight: bold;
text-align: center;
vertical-align: inherit;
}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
#- Nie zastępuj
<th>pogrubionym<td>. Wygląd będzie podobny, ale technologie asystujące nie rozpoznają nagłówka. - Nagłówki wierszy, na przykład nazwy kursów w pierwszej kolumnie, też są elementami
<th>, tyle że zscope="row". - Domyślne wyśrodkowanie zmienisz w CSS:
th { text-align: start; }.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.