Komórka tabeli HTML pełniąca rolę nagłówka

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.