|
|||
Pokud si myslíte, že tuto kapitolu můžete v klidu vynechat, protože tabulky potřebovat nebudete, pak vězte, že tabulky nemusí sloužit jen k prezentaci dat, ale také k určení struktury stránky. Jak? Tak si zkuste představit, že máte tabulku, která nemá žádné ohraničení, vnější ani vnitřní. Ano, taková tabulka samozřejmě nemůže být vidět, ale právě to se po takovéto tabulce žádá. Umisťováním dat do buněk této tabulky můžete tyto prvky snadno pozicovat podle buňky, do které data právě vkládáte.
Tak začneme pěkně od začátku. Tabulka je definována párovou značkou <table> </table>. Atributy této značky určují vzhled a vlastnosti celé tabulky. Z již známých atributů jsou zde align, width, height a border. Atribut border zde určuje šířku dělicích čar tabulky.
Pomocí atributu frame určíte zobrazení vnějších obrysů tabulky. Jeho hodnoty mohou být:
Atribut rules definuje „vnitřek“ tabulky čili tzv. tabulkovou mřížku a může nabývat následujících hodnot:
Kromě mřížky tabulky můžete ještě nastavit vzdálenost mezi jednotlivými buňkami prostřednictvím atributu cellspacing a velikost mezi okrajem buňky a jejím obsahem prostřednictvím atributu cellpadding. Hodnoty obou atributů jsou v bodech.
Buňky v tabulce se definují po řádcích. Každý řádek je vymezen značkou <tr> </tr>. Atributy align a valign této značky určují horizontální a vertikální zarovnání obsahů buněk v řádku tabulky.
Atribut align může nabývat následujících hodnot:
Hodnoty atributu valign mohou být:
Pro definování jednotlivých buněk slouží párová značka <th> </th> jako záhlaví řádku či sloupce a <td> </td> jako běžná buňka. Tyto dvě značky mají shodné atributy. Atributy align a valign jsou stejné jako u značky <tr> </tr>. Dále mají atributy width a height, které mohou určovat šířku a výšku buňky v bodech nebo v procentech vzhledem k šířce tabulky. Pokud atributy width a height chybí, velikost buněk se upraví automaticky podle buňky s největším objektem (nejdelším textem). Jednotlivé buňky v tabulce lze také slučovat pomocí atributů colspan (sloučení sloupců) nebo rowspan (sloučení řádků). Hodnota atributu pak určuje, kolik buněk se má sloučit.
Situaci budeme ilustrovat tabulkou se dvěma řádky (tedy dvakrát použijeme značku <tr> </tr>). Každý řádek bude mít sedm buněk (uvnitř každé značky <tr> </tr> bude sedm značek <td> </td> nebo <th> </th>). První buňka v prvním řádku je prázdná. Napíšeme tedy jednu ze dvou značek pro buňku a mezi počáteční a koncovou značku nevložíme žádný text či jiný objekt. Další položky v prvním řádku jsou hlavičky jednotlivých sloupců. Uzavřeme je tedy do značky <th> </th> (každou položku do své značky). Zbývající řádky vždy tvoří záhlaví řádku a obsah jednotlivých buněk tabulky. První položka tedy bude uzavřena do <th> </th>, ostatní do <td> <td>. Celá tabulka pak bude vymezena značkou <table> </table>:
Ukázka naší tabulky viz. 
Když si výše uvedenou tabulku otevřete v prohlížeči, zjistíte, že ještě není dokonalá. Buňky tabulky mají velikost přizpůsobenou obsahu a jejich obsah je vycentrován v horizontálním i vertikálním směru. Vertikální zarovnání na střed je implicitní, nemusíte jej definovat. Aby naše tabulka dostala konečnou podobu, přidáme ještě do značky <table> </table> atribut border a atributy width a height. Všechny značky <tr> </tr> pak doplníme o atribut align, jak je naznačeno na ukázce 
vlevo.
Pomocí tabuky bez rámečku (tzv. skrytá tabulka) lze vytvořit stránku, kde jsou kladeny speciální požadavky na rozmístění jednotlivých prvků (obrázky, texty, odkazy,…). Tyto prvky se pak vloží do jednotlivých buněk.
Na závěr uvedu bez podrobnějšího popisu některé další atributy používané pro značku <table>. Pomocí atributu background lze vložit obrázek na pozadí tabulky (funkce stejná jako u atributu background pro prvek „body“), prostřednictvím atributu bgcolor lze definovat barvu pozadí.
Podle značky, u které atribut napíšete, se změní pozadí tabulky, řádku nebo samotné buňky. Stejné je to u atributu pro barvu rámečku a mřížky - bordercolor, který definuje barvu rámečku. Dvoubarevného rámečku lze docílit náhradou zmíněného atributu bordercolor dvojicí atributů bordercolordark a bordercolorlight. Pokud omylem zadáte barvy u všech značek, mají prioritu atributy buňky před řádky a řádky před tabulkou.