4.2. Tabulky

HTML nám umožňuje vytvářet různé tabulky. Od těch jednoduchých, až po složitější tabulky, které na stránkách mohou a nemusejí jako tabulka vypadat.

Základní elementy tabulky:

• <table> - ohraničuje tabulku, říká prohlížeči kde tabulka začíná, a kde končí
• <thead> - ohraničuje hlavičku tabulky, není povinný element
• <tbody> - ohraničuje tělo tabulky, není povinný element
• <tfoot> - ohraničuje patičku tabulky, není povinný element
• <tr> - řádek tabulky
• <td> - buňka tabulky
• <th> - buňka tabulky v hlavičce

Jednoduchým zápisem tabulky může být tento kód:

<table>
  <tr>
    <td>Buňka 1.1.</td>
    <td>Buňka 1.2.</td>
  </tr>
  <tr>
    <td>Buňka 2.1.</td>
    <td>Buňka 2.2.</td>
  </tr>
</table>

Jak vidíte, jediné použité elementy jsou <table>, <tr> a <td>. Tyto prvky vytvoří základní strukturu tabulky. Pokud bychom však chtěli složitější tabulku, museli bychom použít další prvky. Podívejme se například na ceník dovolených:

<table>
  <thead>
    <tr>
      <th>Počet osob/Destinace</th>
      <th>Chorvatsko</th>
      <th>Itálie</th>
      <th>Bali</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1 osoba</th>
      <td>5.000 Kč</td>
      <td>7.500 Kč</td>
      <td>12.000 Kč</td>
    </tr>
    <tr>
      <th>2 osoby</th>
      <td>9.500 Kč</td>
      <td>14.000 Kč</td>
      <td>21.750 Kč</td>
    </tr>
    <tr>
      <th>3 osoby</th>
      <td>14.000 Kč</td>
      <td>20.500 Kč</td>
      <td>32.000 Kč</td>
    </tr>
    <tr>
      <th>4 osoby</th>
      <td>18.500 Kč</td>
      <td>25.500 Kč</td>
      <td>41.500 Kč</td>
    </tr>
  </tbody>
</table>