Nagłówek tabeli HTML

Każda tabela HTML może posiadać swój własny nagłówek, czyli tytuł dla treści, która reprezentowana jest przez daną tabelę 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:

My wiemy o tym, iż treść reprezentowana przez naszą przykładową tabelę HTML wskazuje na różne rośliny świata.

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ść naszej przykładowej tabeli HTML?

W tym momencie przyda nam się element caption, ponieważ z założenia treść reprezentowana przez zawartość elementu caption powinna pełnić rolę nagłówka tabeli HTML, czyli powinna pełnić rolę tytułu dla treści reprezentowanej przez zawartość danej tabeli HTML.

Przykład:

<table border>
  <caption>Rośliny Świata</caption>

  <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:

Do naszej przykładowej tabeli HTML został dodany element caption, dlatego od tej pory nam oraz przeglądarce internetowej łatwiej jest odgadnąć, na jaki temat jest treść reprezentowana przez zawartość naszej przykładowej tabeli HTML.