Komórka tabeli HTML pełniąca rolę nagłówka
- Data publikacji
- Ostatnio edytowano
Element td
nie jest jedynym elementem HTML, który może reprezentować komórkę tabeli HTML. Komórkę tabeli HTML może reprezentować również element th, lecz należy pamiętać o tym, iż komórka tabeli HTML reprezentowana przez element th
pełni dodatkową funkcję, o której dowiemy się za chwilę, dlatego ewentualnie tylko niektóre komórki tabeli HTML powinny być reprezentowane przez elementy th
.
Przykład:
<table border>
<tr>
<td>czereśnia</td>
<td>seler</td>
<td>sosna</td>
<td>róża</td>
</tr>
<tr>
<td>jabłko</td>
<td>marchew</td>
<td>dąb</td>
<td>tulipan</td>
</tr>
<tr>
<td>gruszka</td>
<td>rzodkiewka</td>
<td>świerk</td>
<td>słonecznik</td>
</tr>
</table>
Rezultat:
czereśnia | seler | sosna | róża |
jabłko | marchew | dąb | tulipan |
gruszka | rzodkiewka | świerk | słonecznik |
My wiemy o tym, iż treść reprezentowana przez zawartość elementów td
pierwszej kolumny naszej przykładowej tabeli HTML wskazuje na nazwy owoców.
My wiemy o tym, iż treść reprezentowana przez zawartość elementów td
drugiej kolumny naszej przykładowej tabeli HTML wskazuje na nazwy warzyw.
My wiemy o tym, iż treść reprezentowana przez zawartość elementów td
trzeciej kolumny naszej przykładowej tabeli HTML wskazuje na nazwy drzew.
My wiemy o tym, iż treść reprezentowana przez zawartość elementów td
czwartej kolumny naszej przykładowej tabeli HTML wskazuje na nazwy kwiatów.
Jednak czy przeglądarka internetowa również o tym wie?
Czy w jakiś sposób możemy poprawić czytelność treści, która reprezentowana jest przez zawartość elementów HTML budujących naszą przykładową tabelę HTML?
W tym momencie przyda nam się element th
, ponieważ z założenia treść reprezentowana przez zawartość elementu th
powinna pełnić rolę nagłówka wiersza lub kolumny tabeli HTML, czyli powinna pełnić rolę tytułu dla treści reprezentowanej przez zawartość kolejnych komórek występujących w tabeli HTML.
Przykład:
<table border>
<tr>
<th>owoce</th>
<th>warzywa</th>
<th>drzewa</th>
<th>kwiaty</th>
</tr>
<tr>
<td>czereśnia</td>
<td>seler</td>
<td>sosna</td>
<td>róża</td>
</tr>
<tr>
<td>jabłko</td>
<td>marchew</td>
<td>dąb</td>
<td>tulipan</td>
</tr>
<tr>
<td>gruszka</td>
<td>rzodkiewka</td>
<td>świerk</td>
<td>słonecznik</td>
</tr>
</table>
Rezultat:
owoce | warzywa | drzewa | kwiaty |
---|---|---|---|
czereśnia | seler | sosna | róża |
jabłko | marchew | dąb | tulipan |
gruszka | rzodkiewka | świerk | słonecznik |
Do naszej przykładowej tabeli HTML został dodany dodatkowy wiersz (element tr
) zawierający wyłącznie komórki pełniące rolę nagłówka (elementy th
), dlatego od tej pory nam oraz przeglądarce internetowej łatwiej jest zorientować się, jakiego typu treści reprezentowane są przez zawartość kolejnych komórek występujących w kolejnych kolumnach naszej przykładowej tabeli HTML.