Tabele – jak je budować?

Tabele w HTML pozwalają prezentować dane w czytelnej i uporządkowanej formie. Składają się z wierszy oraz kolumn, dzięki czemu świetnie nadają się do tworzenia zestawień, list czy porównań.


<table border="1">
  <caption>Przykładowa tabela uczniów</caption>
  <thead>
    <tr>
      <th>Imię</th>
      <th>Wiek</th>
      <th>Miasto</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Ola</td>
      <td>19</td>
      <td>Warszawa</td>
    </tr>
    <tr>
      <td>Kuba</td>
      <td>18</td>
      <td>Kraków</td>
    </tr>
    <tr>
      <td rowspan="2">Anna</td>
      <td>20</td>
      <td>Gdańsk</td>
    </tr>
    <tr>
      <td colspan="2">Brak dodatkowych danych</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">Łącznie uczniów: 3</td>
    </tr>
  </tfoot>
</table>

<table> – główny kontener tabeli
<tr> – wiersz tabeli, zawiera nagłówki lub komórki danych
<th> – komórka nagłówkowa (domyślnie pogrubiona i wyśrodkowana)
<td> – komórka z danymi
<caption> – tytuł tabeli wyświetlany nad nią
<thead> – sekcja nagłówkowa tabeli, zwykle pierwszy wiersz
<tbody> – główna część tabeli, wiersze z danymi
<tfoot> – sekcja podsumowująca (np. łączna liczba wpisów)
colspan – pozwala rozszerzyć komórkę na kilka kolumn
rowspan – pozwala rozszerzyć komórkę na kilka wierszy

Więcej stylizacji tabel poznasz na podstronie o CSS.