Tabele w HTML

Podstawy tabel HTML

Tabela to zestawienie danych w siatce wierszy i kolumn. Struktura:

<table>          
  <tr>           
    <td>...</td>   
  </tr>
</table>

Nagłówki i stopy tabel

Do tworzenia nagłówków używamy odede><th>, a do stopek tabel <tfoot>.

<thead>
  <tr>
    <th>Nagłówek 1</th>
    <th>Nagłówek 2</th>
  </tr>
</thead>

<tfoot>
  <tr>
    <td>Stopka</td>
    <td>Stopka</td>
  </tr>
</tfoot>

Scalanie komórek (rowspan, colspan)

Scalanie komórek pionowo lub poziomo:

<td rowspan="2">Scalona komórka pionowo</td>
<td colspan="3">Scalona komórka poziomo</td>

Przykładowa tabela z nagłówkiem, stopką i scaleniami

<table border="1">
  <thead>
    <tr>
      <th>Nazwa</th>
      <th>Wartość</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Grupa A</td>
      <td>10</td>
    </tr>
    <tr>
      <td>15</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Razem</td>
      <td>25</td>
    </tr>
  </tfoot>
</table>

Ćwiczenia praktyczne

<table border="1">
  <thead>
    <tr><th>Imię</th><th>Wiek</th></tr>
  </thead>
  <tbody>
    <tr><td>Jan</td><td>25</td></tr>
    <tr><td>Anna</td><td>22</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Suma</td><td>47</td></tr>
  </tfoot>
</table>

Quiz

Podsumowanie

Tworzenie tabel w HTML obejmuje podstawową strukturę, a także zaawansowane funkcje takie jak scalanie komórek i sekcje nagłówków i stopek, które poprawiają czytelność danych.

Checklista