Tabulky jsou v jazyce HTML velmi mocným nástrojem. Jejich použitím lze
nejen tisknout přehledné sloupce různých hodnot, ale i vytvořit
profesionálně vyhlížející stránku použitím různých tabulkových
"triků", které budou popsány v rámci této kapitoly.
Nutno předem upozornit, že tabulky jsou do standardu jazyka zahrnuty
až od jeho verze 3.0, a tedy některé starší prohlížeče je nemusí
umět používat.
Definice tabulky je dána návěštím <TABLE> a
</TABLE>. Atribut BORDER této značky umožňuje
zviditelnění tabulky. Stejně jako u formulářů, je nutné i v tomto
případě v kontejneru tabulky použít další příkazy, které umožňují
specifikovat konečný vzhled celé tabulky. Návěští <TR>
definuje řádek tabulky, který obsahuje návěští (většinou několik)
<TD> představující sloupce dat.
Návěští <TH> (table header) pak definuje nadpis jednotlivých
sloupečků dat. Pomocí značky <CAPTION> je možné přidat
k tabulce popisek, který bude zarovnán na střed tabulky.| Ascii | Latin2 | Kamenik | |
|---|---|---|---|
| Windows | html_wa.zip | html_wl2.zip | html_wk.zip |
| Unix | html_ua.tgz | html_ul2.tgz | html_uk.tgz |
| Ascii | Latin2 | Kamenik | |
|---|---|---|---|
| Windows | html_wa.zip | html_wl2.zip | html_wk.zip |
| Unix | html_ua.tgz | html_ul2.tgz | html_uk.tgz |
| width | specifikuje šířku tabulky (implicitně v pixelech), použitím přípony "%" je možno hodnoty zadávat i relativně vzhledem k šířce okna prohlížeče (např. width="50%") |
| cols | specifikuje celkový počet sloupců tabulky a napomáhá prohlížecímu programu určit počáteční zobrazení tabulky |
| colspec | specifikuje šířky a zarovnání jednotlivých sloupců (např. colspec="L8 C20 R50"; L,R,C specifikuje zarovnání vlevo, vpravo, centrovaně) |
| align | ovlivňuje umístění objektu vůči okolí left vodorovné umístění objektu na levý okraj right vodorovné umístění objektu na pravý okraj center zarovnání doprostřed mezi levý a pravý okraj okna justify zarovnání do bloku (roztažení mezi levý a pravý okraj okna - pokud to jde) bleedleft rozšíření Netscape bleedright rozšíření Netscape |
| frame | určuje způsob zobrazení vnějších obrysů tabulky none/void žádný obrys (implicitní hodnota) above jen horní strana below jen dolní strana hsides horní a dolní strana lhs jen levá strana rhs jen pravá strana vsides levá a pravá strana border/box všechny čtyři strany |
| border | určuje tlouš»ku vnějšího obrysu (implicitně v pixelech) |
| rules | předepisuje vzhled tabulkové mřížky (oddělujících čar uvnitř tabulky)
none žádné čáry basic vodorovné čárky mezi skupinami (THEAD, TFOOT, TBODY) rows čáry mezi řádky cols čáry mezi sloupci all všechny čáry (implicitní hodnota) |
| cellspacing | nastavuje velikost mezery mezi jednotlivými buňkami tabulky |
| cellpadding | nastavuje velikost mezi okrajem buňky tabulky a jejím obsahem |
| clear | specifikuje způsob obtékání tabulky left obtékány budou obrázky umístěné vlevo right obtékány budou obrázky umístěné vpravo all pokračuje se až pod všemi obrázky |
| noflow | zákaz plovoucího textu v tabulce (rozšíření Netscape) |
| nowrap | způsob zalamování textu uvnitř buňek tabulky |
| units | specifikuje další volby pro atribut colspec en v počtu písmen "n" relative relativní šířka sloupce pixels šířka v pixelech (implicitní hodnota) |
| align | určuje pozici nadpisu vůči vnějším okrajům tabulky top nahoře uprostřed (implicitní hodnota) bottom dole uprostřed left vlevo right vpravo |
| align | určuje způsob zarovnávání textu left zarovnávání vlevo (implicitní) right zarovnávání vpravo center centrování na střed justify zarovnávání obou okrajů (pokud je to možné) char zarovnání na znak (typicky desetinná čárka) |
| char | znak, na který se vztahuje zarovnání vyžádané atributem align=char (implicitně desetinná čárka podle národního nastavení) |
| charoff | specifikuje v pixelech offset pro první výskyt znaku char na každém řádku; implicitní hodnota je 50% |
| valign | definuje implicitní způsob vertikálního zarovnání obsahu buňek
pro tento řádek top zarovnání k hornímu okraji buňky middle zarovnání doprostřed buňky (standardní hodnota) bottom zarovnání k dolnímu okraji buňky baseline totéž jako bottom (rozšíření Netscape) |
| align | určuje způsob zarovnávání textu left zarovnávání vlevo (implicitní) right zarovnávání vpravo center centrování na střed justify zarovnávání obou okrajů (pokud je to možné) char zarovnání na znak (typicky desetinná čárka) |
| char | znak, na který se vztahuje zarovnání vyžádané atributem align=char (implicitně desetinná čárka podle národního nastavení) |
| charoff | specifikuje v pixelech offset pro první výskyt znaku char na každém řádku; implicitní hodnota je 50% |
| valign | definuje implicitní způsob vertikálního zarovnání obsahu buňek
pro tento řádek top zarovnání k hornímu okraji buňky middle zarovnání doprostřed buňky (standardní hodnota) bottom zarovnání k dolnímu okraji buňky baseline totéž jako bottom (rozšíření Netscape) |
| nowrap | potlačuje automatické dělení řádků uvnitř buňky |
| bgcolor | barva pozadí |
| width | určuje požadovanou šířku tabulky |
| colspan | počet sloupců, které mají být sloučeny do jednoho; vlastně prodlužuje buňku doprava přes n sloupců |
| rowspan | počet řádků, které mají být sloučeny do jednoho; vlastně prodlužuje buňku dolů přes n řádků |
| axis | umožňuje specifikovat návěští buňky (např. jako název databázového pole); chybí-li, použije se obsah buňky |
| axes | seznam axis návěští oddělených čárkou, která dohromady identifikují názvy polí řádku a sloupce obsahujících buňku |
Pomocí atributů COLSPAN a ROWSPAN lze docílit sjednocení několika
sousedních buňek tabulky ve vodorovném (svislém) směru. Tímto způsobem
lze jednoduše docílit zpřehlednění tabulky.| Ascii | Latin2 | Kamenik | |
|---|---|---|---|
| Windows | html_a.zip | html_wl2.zip | html_wk.zip |
| Unix | html_ul2.tgz | html_uk.tgz |
U příkazu TABLE slouží jeho atribut WIDTH k určení šířky tabulky.
Velikost lze zadávat i relativně, tedy např. WIDTH=100% způsobí
vykreslení tabulky přes celou šíři okna prohlížeče.
V současné době se tabulkových příkazů používá většinou nikoliv k
zarovnávání číselných hodnot, ale k celkové úpravě HTML stránky.
Například lze do několika sloupečků tabulky umístit obrázky, které
budou na stránce pravidelně rozmístěny nezávisle na šířce okna
prohlížeče.
Jako další příklad mohou sloužit všechny lekce výuky jazyka HTML, které
jsou zpracovány jako vycentrované tabulky o šířce 500 pixelů.
Tabulkami je možné výrazně zpřehlednit i formuláře. Zaškrtávací políčka
lze umístit do jedné buňky tabulky, zatímco jejich popis bude ve vedlejším
sloupečku.