Ostatnio edytowany:

Część TFOOT tabeli HTML

Autor: Virtual Patriot

Za pomocą elementu tfoot możemy wskazać przeglądarce internetowej, które wiersze budujące tabelę HTML posiadają zawartość reprezentującą treść pełniącą rolę podsumowującą dla treści reprezentowanej przez zawartość poszczególnych kolumn występujących w danej 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>

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

  <tfoot>
    <tr>
      <th colspan="4">moje ulubione rośliny</th>
    </tr>

    <tr>
      <td>czereśnia</td>
      <td>rzodkiewka</td>
      <td>dąb</td>
      <td>róża</td>
    </tr>
  </tfoot>
</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
moje ulubione rośliny
czereśnia rzodkiewka dąb róża

Przyglądając się naszej przykładowej tabeli HTML możemy dojść do wniosku, że każda kolumna budująca naszą przykładową tabelę HTML posiada swoją własną treść podsumowującą mówiącą o tym, jaka roślina, której nazwa znajduje się w danej kolumnie, jest naszą ulubioną rośliną. W tym wypadku wspomniana treść podsumowująca reprezentowana jest przez zawartość komórek piątego oraz szóstego wiersza budującego naszą przykładową tabelę HTML, dlatego wspomniany piąty oraz szósty wiersz (element tr) wraz ze swoją zawartością może zostać przez nas umieszczony w elemencie tfoot.

Tylko jeden element "tfoot" może być elementem dzieckiem elementu "table".

Nie jest wymogiem, aby element "tfoot" był ostatnim elementem dzieckiem elementu "table", jednak najczęściej tego typu rozwiązanie jest najlogiczniejsze.