Ostatnio edytowany:

Nagłówek tabeli HTML

Autor: Virtual Patriot

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:

owoce warzywa drzewa kwiaty
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 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:

Rośliny Świata
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 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.

Tylko jeden element "caption" może być elementem dzieckiem elementu "table". Ponadto wspomniany element "caption" musi być pierwszym elementem dzieckiem elementu "table".