Sekcje Tabeli HTML

Tabela HTML – Sekcje

Każdą tabele można podzielić na trzy sekcje, które definiują nagłówek, ciało, a także stopkę tabeli. Taki podział może przydać się nam przy formatowaniu tabeli, gdy będziemy do niej dodawać zasady CSS. Jednak nie jest on konieczny do wprowadzenia. Jest to raczej kwestia semantyczna.

tabela-html-naglowek-tabeli-thead-kurs html

Tabela HTML – Sekcja nagłówka

<thead>

Sekcję nagłówkową oznaczymy elementem <thead> (ang. table head – sekcja nagłówkowa tabeli). Ten element przyda nam się przy oznaczaniu nazw kolumn przy użyciu elementu <th>.

tabela-html-cialo-tabeli-tbody-kurs html

Tabela HTML – Sekcja główna

<tbody>

W tzw. ciele tabeli znajdzie się jej główna treść, te nasze dane właściwe. Ciało tabeli oznaczymy elementem <tbody> (ang. table body – ciało tabeli).

tabela-html-stopka-tabeli-tfoot-kurs html

Tabela HTML – Stopka

<tfoot>

Dane podsumowujące tabelę mogą znaleźć się w stopce tabeli. Sekcję tą oznaczymy elementem <tfoot> (ang. table footer – stopka tabeli).

<table>
  <thead>
    <tr>
      <th scope="col">Rok</th>
      <th scope="col">Przychody</th>
      <th scope="col">Koszty</th>
      <th scope="col">Zysk</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">2013</th>
      <td>200'000</td>
      <td>150'000</td>
      <td>50'000</td>
    </tr>
    <tr>
      <th scope="row">2014</th>
      <td>500'000</td>
      <td>300'000</td>
      <td>200'000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Razem</th>
      <td>700'000</td>
      <td>450'000</td>
      <td>250'000</td>
    </tr>
  </tfoot>
</table>
Rok Przychody Koszty Zysk
2013 200’000 150’000 50’000
2014 500’000 300’000 200’000
Razem 700’000 450’000 250’000

To by było na tyle z tabel, jeśli chodzi o czysty html. Natomiast formatowaniem tabeli zajmiemy się podczas kursu CSS i tylko w ten sposób będziemy ją formatować.

Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.