zpět na začátek

8. Tabulky

Cíle kapitoly

Po nastudování této kapitoly budeme rozumět principům tvorby tabulky. Dokážeme vytvořit tabulku o několika řádcích a sloupcích, včetně záhlaví. Budeme umět použít atributy pro sloučení buněk v řádku nebo sloupci a tabulku orámovat.

Úvod

Tabulku uvedeme a ukončíme párovými tagy <table> </table>. Obsah samotné tabulky je tvořen řádky a sloupci.

Princip tvorby tabulky je takový, že se nejprve vytvoří řádek pomocí <tr> </tr>, do kterého se pomocí <td> </td> vytvoří sloupce (buňky). Do sloupců v řádku se zapíše obsah.

Řádek

párové tagy <tr> </tr>

Sloupec

párové tagy <td> </td>

<tr>
  <td>1. místo</td>
  <td>Češi</td>
</tr>
náhled

Záhlaví

párové tagy <th> </th>

<tr>
  <th>Umístění</th>
  <th>Národnost</th>
</tr>
náhled 
<table> 
  <tr>
    <th>Umístění</th>
    <th>Národnost</th>
  </tr>
  <tr>
    <td>1. místo</td>
    <td>Češi</td>
  </tr>
  <tr>
    <td>2. místo</td>
    <td>Slováci</td>
  </tr>
  <tr>
    <td>3. místo</td>
    <td>Italové</td>
  </tr>
</table>
náhled

V případech, kdy bude potřeba sloučit více buněk dohromady, si pomůžeme atributy, které sloučí vybrané řádky nebo sloupce.

Rowspan

sloučí zadaný počet buněk v daném sloupci

Colspan

sloučí zadaný počet buněk v daném řádku

* Aby byla změna dobře viditelná, vytvoříme v tabulce pomocí atributu border="", jednopixelové rámečky.

<table border="1"> 
  <tr>
    <th colspan="2">Mistrovství světa</th>
  </tr>
  <tr>
    <td>1. místo</td>
    <td>Češi</td>
  </tr>
  <tr>
    <td rowspan="2">2. a 3. místo</td>
    <td>Slováci</td>
  </tr>
  <tr>
    <td>Italové</td>
  </tr>
</table>
náhled
Atribut Hodnota Význam
border číselná hodnota, např.: border="1" Tloušťka ohraničení v pixelech
bgcolor název barvy nebo její hexadecimální zápis (vč. #), např: bgcolor="#FF9900" Barva pozadí dané buňky nebo celé tabulky
align left Text je v buňkách zarovnán vlevo (horizontálně)
right Text je v buňkách zarovnán vpravo (horizontálně)
center Text je v buňkách zarovnán doprostřed (horizontálně)
justify Text je v buňkách zarovnán do bloku (horizontálně)
valign top Text je v buňkách zarovnán nahoru (vertikálně)
bottom Text je v buňkách zarovnán dolů (vertikálně)
middle Text je v buňkách zarovnán doprostřed (vertikálně)
baseline Text je v buňkách zarovnán na účaří (vertikálně)
rowspan číselná hodnota, např.: rowspan="2" Sloučí zadaný počet buněk v daném sloupci
colspan číselná hodnota, např.: colspan="2" Sloučí zadaný počet buněk v daném řádku

Shrnutí

Naučili jsme se vytvořit tabulku včetně záhlaví, sloučit buňky v řádku nebo sloupci a tabulku orámovat.

Poznali jsme tyto párové tagy: <table>, <tr>, <td>, <th>

Poznali jsme tyto atributy: border, rowspan, colspan, (valign, bgcolor)

Úkol

Vytvořte tabulku o 4 řádcích (vč. záhlaví) a 2 sloupcích. Slučte buňky záhlaví. Slučte 2. a 3. buňku 1. sloupce. Tabulku vyplňte libovolnými údaji a orámujte ji.

Příklad: náhled úkolu