Od provozovatele projektu Rychlost.CZ

Tabulky - Různé

vydáno: 05.02.2016, seriál: Různé | komentářů: 0

Tabulky slouží k zobrazení většího množství dat v HTML  dokumentu. V minulosti se také tabulky využívaly k definování struktury webových stránek. V dnešní době se již využívá vlastnosti kaskádový stylů.

Základní blok tabulky definujeme pomocí párového tagu <table>. Tento párový tag vymezuje místo v HTML dokumentu a do něj pak vpisujeme další prvky tabulky.

Základní tabulku tvoří řádky, které vytvoříme pomocí párového tagu <tr> a ty, dále dělíme na buňky <td>. Kromě těchto základních prvků tabulky, existují další pomocné HTML elementy, které přidávají tabulce doplňkové vlastnosti. Patří mezi ně například záhlaví <thead>, zápatí <tfoot> nebo titulek tabulky <caption>

Dělení buněk

Buňky tabulky se dělí na tzv. hlavičkové buňky a klasické buňky.

<th>

Hlavičkovou buňku lze využít při tvorbě hlaviček sloupců v tabulce. Text buněk uzavřený v tomto tagu je zvýrazněn oproti ostatnímu textu tučným písmem.

<td>

Klasická buňka dělí řádky tabulky na jednotlivé buňky bez zvýraznění.

Ukázka:
HTML
<table>
<tr>
<th>Hlavičková buňka 1. sloupce</th>
<th>Hlavičková buňka 2. sloupce</th>
</tr>
<tr>
<td>levá buňka v prvním řádku</td>
<td>pravá buňka v prvním řádku</td>
</tr>
<tr>
<td>levá buňka ve druhém řádku</td>
<td>pravá buňka ve druhém řádku</td>
</tr>
</table>
Použité tagy: <table>, <tr>, <th>, <td>

Výsledek:

Hlavičková buňka 1. sloupce Hlavičková buňka 2. sloupce
levá buňka v prvním řádku pravá buňka v prvním řádku
levá buňka ve druhém řádku pravá buňka ve druhém řádku

V další ukázce si rozšíříme vytvořenou tabulku o doplňkové HTML elementy, zmiňované na začátku článku.

Nejdříve přidáme do naši tabulky titulek <caption>. Jedná se o uzavřený tag, který se umisťuje ihned za tag <table>. Poté následují další prvky tabulky. Díky rozdělení tabulky na hlavičku, patičku a tělo umožníme například prohlížečům zobrazovat hlavičku a patičku, přestože budeme procházet "scrollovat" obsahem tabulky. Dále například při tisku se zobrazí hlavička na každé stránce a je to výhodnější i pro úpravu vlastností tabulky pomocí CSS.

Hlavička tabulky <thead> umístí obalené buňky do nejvyšších řádků tabulky. Po hlavičce následuje patička <tfoot>. Zní to možná zvláštně, ale skutečně po hlavičce uvádíme patičku. Buňky obalené mezi tagy <tfoot> se zobrazí jako poslední řádky tabulky.

Zbylé řádky obalíme tagem <tbody>. Tyto řádky budou zobrazeny mezi hlavičkou a patičkou.

Ukázka:
HTML
<table>
<caption>Titulek tabulky</caption>
<thead>
<tr>
<th>Hlavičková buňka 1. sloupce</th>
<th>Hlavičková buňka 2. sloupce</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Patičková buňka 1. sloupce</th>
<th>Patičková buňka 2. sloupce</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Obsahová buňka 1. sloupce</th>
<th>Obsahová buňka 2. sloupce</th>
</tr>
</tbody>
</table>

Výsledek:

Titulek tabulky
Hlavičková buňka 1. sloupce Hlavičková buňka 2. sloupce
Patičková buňka 1. sloupce Patičková buňka 2. sloupce
Obsahová buňka 1. sloupce Obsahová buňka 2. sloupce

Seskupování sloupců

Sloupce tabulky lze seskupovat pomocí tagu <colgroup> do logických skupin. Každá skupina obsahuje jednotlivé sloupce <col> s danými vlastnostmi. Díky rozdělení sloupců na jednotlivé části, lze využít CSS pro úpravu vlastností každého sloupce zvlášť. 

Sloupce se stejnými vlastnostmi lze spojit díky atributu span a číselná hodnota udává kolik sloupců má být spojeno. 

Ukázka:
HTML
<table>
<colgroup>
<col width="20%" style="background: #ccc;" />
<col span="2" style="background: #999;" />
</colgroup>
<tr>
<th>1. sloupec</th>
<th>2. sloupec</th>
<th>3. sloupec</th>
</tr>
<tr>
<td>1. sloupec</td>
<td>2. sloupec</td>
<td>3. sloupec</td>
</tr>
</table>
Použité tagy: <table>, <colgroup>, <col>, <tr>, <th>, <td>

Výsledek:

1. sloupec 2. sloupec 3. sloupec
1. sloupec 2. sloupec 3. sloupec

V ukázce jsem vytvořili malou tabulku se dvěmi řádky a třemi sloupci. Kdy jsme prvnímu sloupci nastavili světle šedou barvu pozadí a dalším dvěma sloupcům tmavě šedou barvu pozadí. Docílili jsme toho právě díky atributu span="2".

Tabulky máme úspěšně vytvořené. Zrekapitulujme si všechny dnes použité tagy.

<table>

Párový tag definující umístění tabulky v HTML dokumentu.

<tr>

Párový tag vytvářející řádek tabulky. Do něj se vpisují tagy <td></td>, které dělí řádek na jednotlivé buňky.

<td>

Párový tag definující buňku tabulky a zároveň obaluje obsah, který chceme v tabulce zobrazit. 

<th>

Párový tag tvořící hlavičkovou buňku tabulky. Má stejné vlastnosti jako tag <td>. Liší se pouze zvýrazněním obsahu daných buněk.

<caption>

Titulek tabulky. Jedná se o párový tag.

<thead>

Hlavička tabulky. Obalené buňky budou zobrazeny jako první řádky tabulky.

<tfoot>

Patička tabulky. Uvádí se po hlavičce tabulky a obalené buňky budou zobrazeny jako poslední řádky tabulky.

<tbody>

Párový tag obalující obsah tabulky. Uvádí se za hlavičkou a patičkou, ale zobrazí se mezi těmito částmi tabulky.

<colgroup>

Párový tag seskupující sloupce tabulky do logických skupin.

<col>

Definuje vlastnosti sloupce tabulky. Díky atributu span lze nastavit počet sloupců, které budou mít stejné vlastnosti.

HTML: návody jak psát html tagy

Seriál Různé

Přejít na následující kapitolu:Barvy >

Seznam všech článků seriálu: