8. Tabele – dane w uporządkowanej formie

~12 min poziom: początkujący

Tabele służą do prezentowania danych w wierszach i kolumnach – cenniki, harmonogramy, porównania, wyniki.

Podstawowa tabela

<table>
  <tr>
    <th>Produkt</th>
    <th>Cena</th>
    <th>Ilość</th>
  </tr>
  <tr>
    <td>Kawa</td>
    <td>18 zł</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Herbata</td>
    <td>12 zł</td>
    <td>1</td>
  </tr>
</table>

Semantyczna tabela (zalecana)

<table>
  <caption>Cennik kaw – grudzień 2025</caption>
  <thead>
    <tr>
      <th>Nazwa</th>
      <th>Pojemność</th>
      <th>Cena</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Espresso</td>
      <td>30 ml</td>
      <td>9 zł</td>
    </tr>
    <tr>
      <td>Latte</td>
      <td>300 ml</td>
      <td>16 zł</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Razem</td>
      <td>25 zł</td>
    </tr>
  </tfoot>
</table>
Do zapamiętania: Używaj <thead>, <tbody>, <tfoot> i <th scope="col"> – to pomaga czytnikom ekranu i SEO.

Zadanie

Stwórz tabelę:

  • 3 kolumny: Dzień, Godzina, Przedmiot
  • 5 wierszy z planem lekcji na tydzień
  • dodaj <caption> i <thead>
[ Miejsce na reklamę ]