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ů.
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>.
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í.
<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>
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.
<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:
| 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 |
Sloupce tabulky lze seskupovat pomocí tagu <colgroup><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.
<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>
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.
<td>Párový tag definující buňku tabulky a zároveň obaluje obsah, který chceme v tabulce zobrazit.
<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.
