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 – 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 – 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
<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ć.