Komórki nagłówkowe tabeli <th>

Jak powinno się tworzyć nagłówek tabeli?

Nagłówek poziomy

<table>
<tr>
	<th>...</th>	<th>...</th>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
</table>

Nagłówek pionowy

<table>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
</table>

Nagłówek mieszany

<table>
<tr>
	<th></th>	<th>...</th>	<th>...</th>
</tr>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
</table>

Komórkę nagłówkową <th>...</th> wstawia się tak samo jak zwykłą komórka tabeli <td>...</td>. Różni się jedynie tym, że tekst do niej wpisany, jest napisany zwykle czcionką pogrubioną oraz ustawiony na środku (wyśrodkowany). Dlatego właśnie - jak sama nazwa wskazuje - komórka taka nadaje się do tworzenia nagłówka tabeli. Może się ona znajdować w dowolnym wierszu - nie tylko w pierwszym. Dodatkowo w wierszu takim mogą się znajdować również inne zwykłe komórki <td>...</td>. Dzięki temu możemy stworzyć pionowy nagłówek, znajdujący się np. na lewym brzegu tabeli.

Chociaż identyczny efekt wizualny można uzyskać odpowiednio zmieniając wygląd zwykłych komórek tabeli (<td align="center"><b>...</b></td>), to absolutnie taka metoda nie jest zalecana. Komórki nagłówkowe <th>...</th> oprócz efektu wizualnego niosą ze sobą ważne znaczenie semantyczne.

Potrzebujesz pomocy?
Przy tworzeniu tabel HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ wierszy i kolumn, a także zdefiniujesz estetyczny wygląd poprawiający prezentację treści.

Przykład <th>

A	B
komórka1	komórka2
komórka3	komórka4

1	komórka1	komórka2
2	komórka3	komórka4

	A	B
1	komórka1	komórka2
2	komórka3	komórka4

Dymek narzędziowy

Dla bardzo obszernych tabel, z dużą ilością komórek nagłówkowych, przydatne może się okazać, określenie atrybutu title="tekst" dla każdej zwykłej komórki <td>. Jako wartość tego atrybutu podajemy tekst, który powinien pojawić się na ekranie w dymku podpowiedzi, kiedy użytkownik wskaże myszką określoną komórkę tabeli. Można wpisać tam treść nagłówka, do którego należy dana komórka. Ułatwi to czytanie, jeśli komórki nagłówkowe znikną już z ekranu, z powodu zbyt długiej tabeli. Jest to bardzo przydatna funkcja zwłaszcza, jeśli tabela posiada dużo kolumn.

Przykład <th, td title>

Wskaż myszką dowolną zwykłą komórkę poniższej tabeli:

	A	B
1	komórka1	komórka2
2	komórka3	komórka4

Przy okazji: zwróć uwagę na komórkę powyższej tabeli, która znajduje się w jej lewym-górnym rogu (na samym brzegu). Wygląda ona inaczej niż pozostałe, ponieważ nie posiada wewnętrznego obramowania. Dzieje się tak dlatego, bo nie ma tam żadnej treści. Jeśli chcemy to zmienić, należy wpisać do niej:  . Jest to znak specjalny, oznaczający niełamliwą spację. Nie pojawi się on na ekranie, ale za to wprowadzi obramowanie do pustej komórki tabeli.

	A	B
1	komórka1	komórka2
2	komórka3	komórka4

Pytania i odpowiedzi <th>

Co to jest TH w HTML?

Jest to znacznik służący do wstawiania komórek nagłówkowych w tabeli.

Jak zrobić nagłówek w tabeli HTML?

W tym celu wystarczy wstawić normalny wiersz na początku tabeli, ale zamiast znaczników TD dodać w nim elementy TH. Na przykład, aby utworzyć dwukolumnową tabelę składającą się z jednego wiersza nagłówka i dwóch zwykłych wierszy, można się posłużyć następującym kodem: <table> <tr> <th>nagłówek, kolumna 1</th> <th>nagłówek, kolumna 2</th> </tr> <tr> <td>wiersz 1, kolumna 1</td> <td>wiersz 1, kolumna 2</td> </tr> <tr> <td>wiersz 2, kolumna 1</td> <td>wiersz 2, kolumna 2</td> </tr> </table>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`<th>`	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤12.1 2012-11-20	1 2003-06-23
`<th align>`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
`<th colspan>`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
`<th rowspan>`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23