Tabulky jsou docela složité struktury, které se skládají z řádků a sloupců. Vnější základní strukturu tabulek vždy tvoří prvek table.
<table> … </table>
Uvnitř tohoto prvku probíhá vlastní definice tabulky. Mimochodem, je doporučeno během implementace tabulky v HTML přiřadit rámeček. Tak si můžete lépe představit, jak přesně probíhají řádky a sloupce. K tomu přiřadíte počátečnímu <table> kombinaci atributů border="1". (Vezměte na vědomí, že atribut border by neměl být v HTML používán. Místo toho se k daným CSS vlastnostem uchylujeme. O tom později víc).
<table border="1"> … </table>
Pokračujeme s definicí řádků tabulky. To se děje pomocí prvku tr.
<table border="1"> <tr></tr> </table>
To ale ještě nevede k požadovanému výstupu. Následně je třeba definovat sloupce. To se opět provádí pomocí prvku td.
<table border="1">
<tr>
<td></td>
</tr>
</table>Nyní můžete definovat první obsah tabulky. To se definuje mezi <td> a </td>.
<table border="1">
<tr>
<td>Obsah 1</td>
</tr>
</table>
Teprve teď se vyplatí podívat na výsledek v prohlížeči.
Zatím to není zas tak překvapivé, koneckonců tabulka momentálně sestává jen z jedné buňky. Nyní můžete přidat další sloupec. To se opět provádí pomocí prvku td. Dbejte na to, abyste ho definovali uvnitř prvku tr.
<table border="1">
<tr>
<td>Obsah 1</td>
<td>Obsah 2</td>
</tr>
</table>
Zde opět pohled na výsledek.
Pro přidání dalších řádek do tabulky jednoduše vytvoříte další prvek tr, ve kterém pak opět definovali požadované prvky td.
Zde je další příklad:
<table border="1">
<tr>
<td>Obsah 1</td>
<td>Obsah 2</td>
</tr>
<tr>
<td>Obsah 3</td>
<td>Obsah 4</td>
</tr>
</table>
Pohled na výsledek v prohlížeči poskytuje následující:
Tímto způsobem můžete vytvářet i rozsáhlé tabulky.
Definovat hlavičku, tělo a patu
Tabulky lze rozdělit na logické oblasti. Jednou z nich je hlavička, jedna nebo více oblastí dat a patička. Následující příklad ukazuje, jak to může vypadat:
<table border="1">
<thead>
<tr>
<th>Odjezd</th>
<th>Příjezd</th>
<th>Nástupiště</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Berlín</td>
<td>Stralsund</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlín</td>
<td>Hamburk</td>
<td>1</td>
</tr>
<tr>
<td>Mnichov</td>
<td>Berlín</td>
<td>3</td>
</tr>
</tbody>
</table>A zde je pohled na výsledek v prohlížeči:
Rozdělení na uvedené oblasti nemá zjevný vizuální efekt. Samozřejmě se nabízí otázka: Proč byste se pak měli obtěžovat a tyto oblasti definovat? Na to existují dva dobré důvody:
• Pomocí CSS lze oblasti podle potřeby různě formátovat.
• Prohlížeče při tisku dlouhých tabulek mohou opakovat tabulkovou hlavičku a tabulkovou patu na každé stránce.
Hlavička tabulky je zavedena pomocí thead. Začínají řádky tabulky patřící do hlavičky. Nezapomeňte uzavřít hlavičku </thead>.
Pokud má tabulka získat patičku, musí být tato definována před tělem tabulky. Pata je zahájena pomocí <tfoot>. Následně mohou následovat opět jedna nebo více řádků patřících do paty. Patu tabulky ukončíte pomocí </tfoot>.
Samotné tělo tabulky se definuje uvnitř prvku tbody. Toto tbody může být vícekrát použito. Každé tělo tabulky se uzavře pomocí </tbody>.
Proč byste například v tabulce používali více prvků tbody? Příkladem může být tabulka německé fotbalové ligy. V takové tabulce obvykle existuje více oblastí.
• Mistři
• Účastníci Ligy mistrů
• Kvalifikanti Ligy mistrů
• Účastníci Evropské ligy
• Střed pole
• Play-off
• Sestupující
Každou tuto oblast můžete umístit do vlastního prvku tbody a poté je formátovat pomocí CSS odlišně.
Předdefinování sloupců
To, jak je tabulka zobrazena v prohlížečích, závisí přirozeně především na existujícím počtu řádků a sloupců. Proces zobrazení tabulky pro prohlížeč však není zcela jednoduchý. Prohlížeč totiž musí nejprve celou tabulku načíst, než ji může zobrazit. Zejména u velmi rozsáhlých tabulek to může samozřejmě trvat určitý čas. Tento problém lze obejít tím, že se přímo sdělí prohlížeči, ze kolika sloupců tabulka skutečně sestává.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Titul</th>
<th>Cena</th>
</tr>
<tr>
<td>23223423434</td>
<td>Krátké dějiny téměř všeho</td>
<td>29,95 eur</td>
</tr>
</table>
Pomocí colgroup se zahájí předdefinování sloupcových informací. Všimněte si, že většina atributů dostupných v dřívějších verzích HTML pro colgroup již v HTML5 není povolena. Ze všech je nyní povolen pouze atribut span. Jako hodnotu očekává tento atribut span počet sloupců v tabulce.
Prvek colgroup je umístěn přímo za zahajujícím <table>. Sloupce samotné jsou pak definovány jednotlivými prvky col.
Při použití colgroup jsou obecně k dispozici dvě možnosti:
• S atributem span
• Bez atributu span
Pokud není použit atribut span, musí být uvnitř prvku colgroup pro každý sloupec, který by měl být zahrnut v grupě sloupců, definován jednotlivý prvek col. Všimněte si, že prvek col je samostatný prvek.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Titul</th>
<th>Cena</th>
</tr>
<tr>
<td>23223423434</td>
<td>Krátké dějiny téměř všeho</td>
<td>29,95 eur</td>
</tr>
</table>
Existuje také hybridní forma.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Tato metoda je vždy praktická, pokud je sloupec předdefinován samostatně, zatímco ostatní jsou seskupeny do jedné skupiny.
