Úvod a cíle

Tabulkový modul

Tabulkový modul slouží ke vkládání tabulek - ať už ohraničených či neohraničených. Nejdůležitější prvky Tabulkového modulu tvoří kořenový prvek tabulky, prvek řádku tabulky a prvek buňky tabulky.

Prvek <table> </table>

• Z anglického table neboli tabulka.
• Označuje začátek a konec tabulky.
• Tabulka se může nalézat přímo v prvku body, smí se nacházet i v prvku oddílu div, ale nesmí se nacházet např. v prvku odstavce p.

Prvku tabulky lze přiřadit mnoho atributů, ale nám zatím postačí seznámit se s atributem border.

Atribut border

• Z anglického border neboli lem, obruba.
• Hodnotou je číslo, se kterým se pracuje jako s velikostí v pixelech. Na jeho výši závisí tloušťka rámečku ohraničujícího tabulku (při hodnotě 0, která je nastavena implicitně, se tabulka zobrazí bez rámečku).
• Při hodnotě vyšší než nula se zároveň v tabulce vykreslí mřížka.
• Stejně jako většina prezentačních atributů, i tloušťka rámečku a vykreslení mřížky se dá mnohem lépe nadefinovat pomocí CSS.
• Jedná se o nepovinný atribut tabulky.

Syntaxe zápisu atributu border u prvku tabulky:

<table border="1"> obsah tabulky </table>

Každá tabulka se skládá především z prvků řádek tabulky a ty dále z prvků buněk tabulky, které už obsahují samotná data tabulky.

Prvek <tr> </tr>

• Z anglického table row neboli řádka tabulky.
• Vkládá nový řádek tabulky.
• Je vnořen do prvku tabulky table.

Prvek <td> </td>

• Z anglického table data neboli data tabulky.
• Vkládá novou buňku tabulky.
• Je vnořen do prvku řádky tabulky tr.

Syntaxe kódu tabulky s řádky a buňkami vypadá takto:

<table>

<tr>

    <td>data tabulky</td>

    <td>data tabulky</td>

</tr>

</table>

Ukázka jednoduché tabulky bez mřížky a ohraničení je uvedena v příkladu . Upravte kód příkladu tak, aby se v tabulce vykreslila mřížka a kolem tabulky rámeček (viz atribut border). Zkuste zvětšit šířku rámečku.

Další důležité prvky, které mohou být součástí tabulky, jsou prvek hlavičky tabulky a prvek nadpisu tabulky.

Prvek <th> </th>

• Z anglického table header neboli hlavička tabulky.
• Obdoba prvku buňky tabulky td s tím rozdílem, že prvek hlavičky tabulky je určen pro vložení buněk do první řádky tabulky.
• Text umístěný v tomto prvku se ve většině prohlížečů zobrazí tučně a zarovnán na střed buňky.

Prvek <caption> </caption>

• Z anglického caption neboli titulek, popisek, nadpis.
• Umisťuje se hned za počáteční značku prvku tabulky table.
• Text nalézající se uvnitř tohoto prvku se zobrazí jako jednoduchý nadpis nad tabulkou.
• Nadpis je zpravidla zarovnán na střed (podle středu tabulky) a zobrazí se normálním písmem.

Ukázky jednoduchých tabulek s nadpisem, hlavičkou, rámečkem i mřížkou jsou uvedeny v příkladech a .

Tabulkový modul obsahuje ještě další prvky, ale výše uvedené jsou ty nejdůležitější. Samotnému prvku table může být kromě atributu border přiřazeno mnoho dalších atributů jako třeba velikost vnitřního a vnějšího okraje buněk (atributy cellpadding a cellspacing), minimální šířka tabulky (atribut width) nebo vzhled rámečku a mřížky (atributy frame a rules). Prvkům řádek tabulky a buňka v tabulky lze pomocí atributů dále nadefinovat např. způsob horizontálního a vertikálního zarovnání jejich obsahu (atributy align a valign). Přestože jsou tyto atributy v XHTML 1.1 ještě povoleny, je jasné, že mají ryze prezentační charakter, a proto jsou z XHTML pomalu ale jistě vytlačovány (v návrhu XHTML 2.0 už tyto atributy nejsou). Proto je lepší při designu tabulky sáhnout po CSS stylech, které navíc poskytují mnohem více možností.