Tabulka je jeden z nejmocnějších nástrojů HTML. Je možné je používat jak při prezentaci informací, tak pro přesnou kontrolu nad layoutem stránky. V této kapitole naleznete jen nejzákladnější informace o tabulkách. Pokud budete vytvářet složitější tabulky, přenechejte práci html editorům.
Tabulky se v HTML tvoří pomocí elementu TABLE. Tento element může obsahovat element CAPTION, který slouží k zadání nadpisu tabulky, a několik elementů TR, které obsahují jednotlivé řádky tabulky.
Každá řádka je pak tvořena z jednotlivých buněk, které jsou zadány pomocí elementů TD nebo TH.
TD - obyčejné buňky TH - buňky se záhlavím tabulky
Tak takto nějak by mohlo vypadat vysvědčení:
<TABLE> <TR> <TH>Předmět</TH> <TH>Známka</TH> </TR> <TR> <TD>Tělesná výchova</TD> <TD>4-5</TD> <TR> <TR> <TD>Programování</TD> <TD>1-5</TD> </TR> </TABLE>
Výstup poté bude:
|
Nevím jak vám, ale mně se taková tabulka nelíbí. Sice jde jen o vysvědčení, ale kdyby se jednalo o nějaký důležitý dokument (třeba telefonní seznam kamarádek), pak byste určitě chtěli, aby tabulka vypadala lépe a hlavně, aby obsahovala mřížku. K tomu stačí v elementu TABLE přidat atribut BORDER:
<TABLE BORDER> <TR> <TH>Předmět</TH> <TH>Známka</TH> </TR> <TR> <TD>Tělesná výchova</TD> <TD>4-5</TD> <TR> <TR> <TD>Programování</TD> <TD>1-5</TD> </TR> </TABLE>
Výstup:
|
Atributu BORDER lze přiřadit hodnotu, která udává šířku rámečku okolo tabulky v pixelech. Zápis <TABLE BORDER> je totožný se zápisem <TABLE BORDER="1">.
Standardní způsob zarovnávání můžeme u každé buňky změnit pomocí atributu ALIGN. Ten může nabývat hodnot:
LEFT - zarovnání vlevo RIGHT - zarovnání vpravo CENTER - centrování
Protože bývá zvykem zarovnávat číslice vpravo a text vlevo, upravil jsem tak první příklad:
<TABLE BORDER> <TR> <TH>Předmět</TH> <TH>Známka</TH> </TR> <TR> <TD ALIGN="LEFT">Tělesná výchova</TD> <TD ALIGN="RIGHT">4-5</TD> <TR> <TR> <TD ALIGN="LEFT">Programování</TD> <TD ALIGN="RIGHT">1-5</TD> </TR> </TABLE>
Výstup:
|
Atribut ALIGN je možno použít u elementu TR. Toto nastavení pak bude platné pro celou řádku. Zarovnání u buňky bude mít přednost před zarovnáním pomocí TR.
Jednotlivé buňky tabulky můžete také zarovnat vertikálně pomocí atributu VALIGN. Ten může také nabývat tří hodnot:
TOP - obsah buňky je zarovnán s horním okrajem buňky BOTTOM - obsah buňky je zarovnán se spodním okrajem buňky MIDDLE - obsah buňky je uprostřed buňky
Atribut VALIGN je možno použít u elementů TR, TD a TH. Nastavení TR je společné pro celou řádku, nastavení TH a TD má přednost před nastavením TR.
Někdy je potřeba sloučit několik buněk v jednu. Například, máme-li společný nadpis. Pokud chcete sloučit několik buněk v jednom řádku za sebou, stačí u buňky použít atribut COLSPAN. Jako jeho hodnotu uvedete počet buněk, které chcete sloučit. Atribut ROWSPAN sloučí buňky, které jsou pod sebou.
Velikost buněk je určována automaticky tak, aby se do nich vešel jejich obsah. Velikost však můžete nastavit také sami, pomocí atributů:
WIDTH - šířka buňky v pixelech nebo v procentech HEIGHT - výška buňky v pixelech nebo v procentech
Toto nastavení není závazné, a tak prohlížeč může buňku zvětšit. Neměla by se však zobrazit menší, než je nastaveno.
Pokud použijete atribut NOWRAP, nebude se její obsah zalamovat do řádků. Někdy je to lepší, než nastavovat velikost ručně.
Další nastavení tabulky můžete udělat pomocí atributů:
CELLPADDING - nastavení vzdálenosti buňky od okrajů buňky CELLSPACING - zvětší mezeru mezi buňkami
Pro lepší představení tu mám pro vás dva příklady:
<TABLE BORDER CELLSPACING="6"> <TR> <TH>Předmět</TH> <TH>Známka</TH> </TR> <TR> <TD ALIGN="LEFT">Tělesná výchova</TD> <TD ALIGN="RIGHT">4-5</TD> <TR> <TR> <TD ALIGN="LEFT">Programování</TD> <TD ALIGN="RIGHT">1-5</TD> </TR> </TABLE>
Výstup:
|
A ještě případ, kdy použiji místo atributu CELLSPACING(=6) použiji atribut CELLPADDING(=6):
|
Stejně jako u buňky lze i u tabulky změnit její šířku a výšku. Slouží k tomu stejné elementy:
WIDTH - šířka buňky v pixelech nebo v procentech HEIGHT - výška buňky v pixelech nebo v procentech
jsou to však atributy tagu <TABLE></TABLE>.
Tabulku lze obtékat textem stejně jako obrázky. Musíte nastavit hodnotu atributu ALIGN:
LEFT - tabulka zarovnána vlevo RIGHT - tabulka zarovnána vpravo ALIGN - tabulka zarovnána doprostřed
Pomocí atributu CAPTION můžete tabulce přiřadit nadpis. CAPTION může nabýt hodnoty:
TOP - nadpis bude nad tabulkou BOTTOM - nadpis bude pod tabulkou
Pokud žádnou hodnotu neuvedete, počítá se s TOP. CAPTION musíte uvést ještě před definicemi řádků tabulky. Abych byl více názorný, ještě vám ukáži poslední příklad tabulky, tentokrát s nadpisem:
<TABLE BORDER> <CAPTION>Vysvědčení studenta</CAPTION> <TR> <TH>Předmět</TH> <TH>Známka</TH> </TR> <TR> <TD ALIGN="LEFT">Tělesná výchova</TD> <TD ALIGN="RIGHT">4-5</TD> <TR> <TR> <TD ALIGN="LEFT">Programování</TD> <TD ALIGN="RIGHT">1-5</TD> </TR> </TABLE>
Výstup:
|