Ostatnio edytowany:

Część THEAD tabeli HTML

Autor: Virtual Patriot

Jak już zdążyliśmy zauważyć wiersze (elementy tr) oraz komórki (elementy td lub elementy th) są jednymi z głównych rzeczy, które budują każdą tabelę HTML.

Ponadto każdy wiersz tabeli HTML (element tr) może pełnić dodatkową rolę ze względu na to, jakiego typu treść reprezentowana jest przez zawartość danego wiersza 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

Nasza przykładowa tabela HTML składa się między innymi z czterech wierszy, czyli czterech elementów tr.

Treść reprezentowana przez zawartość pierwszego wiersza naszej przykładowej tabeli HTML jest treścią pełniącą rolę głównych nagłówków dla treści reprezentowanych przez zawartość poszczególnych kolumn występujących w naszej przykładowej tabeli HTML, dlatego wspomniany wiersz, czyli element tr, wraz z całą swoją zawartością może zostać przez nas umieszczony w elemencie thead, ponieważ z założenia treść reprezentowana przez zawartość elementu thead powinna pełnić rolę głównych nagłówków dla treści reprezentowanych przez zawartość poszczególnych kolumn występujących w tabeli HTML.

Przykład:

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

  <thead>
    <tr>
      <th>owoce</th>
      <th>warzywa</th>
      <th>drzewa</th>
      <th>kwiaty</th>
    </tr>
  </thead>

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

Od tej pory nasz przykładowy kod HTML zawiera dodatkową informację dla przeglądarki internetowej o tym, że to właśnie treść reprezentowana przez zawartość pierwszego elementu tr budującego naszą przykładową tabelę HTML pełni rolę głównych nagłówków dla treści reprezentowanych przez zawartość poszczególnych kolumn występujących w naszej przykładowej tabeli HTML.

Tylko jeden element "thead" może być elementem dzieckiem elementu "table". Ponadto w kodzie HTML przed wspomnianym elementem "thead" nie może wystąpić żaden element "tbody", element "tfoot" lub element "tr".