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

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

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FnjHVkwhok1PQxJdOoFl6%2Fimage.png?alt=media&#x26;token=63f7314b-348b-4fed-b643-1cc4478c7ee5" alt=""><figcaption></figcaption></figure>

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](https://webkod.pl/kurs-html/tagi/tabela/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:

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

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FKrVq3V3wq6hCtZqUyOik%2Fimage.png?alt=media&#x26;token=6af77901-b15a-4e78-9096-59f411e01741" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FBgX11Ofq3cc6g964KIrE%2Fimage.png?alt=media&#x26;token=f57f0319-6682-472f-8284-65a8cd5b5252" alt=""><figcaption></figcaption></figure>
