ARCHIV

HTML (8) - tabulky

Dnes začneme s další důležitou částí HTML: s tabulkami

29.7.2004 15:00 | Pavel Kácha | Články autora | přečteno 42846×

Začátek tabulky

Tabulky jsou v HTML velice důležité nejen proto, že se pomocí nich dají velice přehledně prezentovat různé informace, ale i proto, že si s nimi můžete občas vypomoci i při designu stránek, tenhle způsob by se ale už neměl používat. Na druhou stranu podpora CSS u některých prohlížečů ještě dost pokulhává, takže je to někdy bohužel nutnost, už proto byste měli tabulky znát.

Tabulky musíte uzavřít do párového tagu <table></table>, použití ukončovacího tagu je vyžadováno.

Vlastnosti tabulek můžete měnit pomocí mnoha atributů. Užitečnou funkci má atribut summary="", kterým definujete popis tabulky a její strukturu pro "nevizuální" média, tj. například pro čtečky pro zrakově postižené. Jeho hodnotou je libovolný řetězec.

Můžete také určit, jak má být na stránce tabulka zarovnána. K tomu využijete atribut align="", kterému můžete přiřadit jednu z těchto hodnot: left, right nebo center. Tím určíte jestli má být tabulka zarovnána k levé, pravé straně nebo do středu stránky. Tento atribut by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Atributem width="" můžete nastavit šířku tabulky. Jako hodnotu můžete použít buď celé číslo nebo procentuální část z šířky okna prohlížeče. Pokud tento atribut nepoužijete, nastaví si prohlížeč šířku tabulky sám.

Atribut bgcolor="" nám umožní nastavit pozadí celé tabulky. Jeho hodnotou může být buď pojmenovaná barva (např.: red) nebo hexadecimální zápis barvy uvozený # (např.: #c0cafd - vždy dvě hexadecimální čísla udávají intenzitu jedné ze základních barev, zleva jsou to červená, zelená a modrá, smícháním těchto tří barev vznikne výsledná barva, kterou vidíte na monitoru.). Tento atribut by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Jestliže chcete mít kolem tabulky rámeček, použijte atribut border="". Pro obyčejný jednoduchý rámeček stačí nastavit hodnotu 1.

U elementu <table></table> se můžeme setkat s těmito známými atributy:

• id
• class
• lang
• dir
• title
• style
• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup

Můžete použít ještě několik atributů, ale o nich si povíme v příštím díle

Řádek tabulky

Prohlížeči už jsme pomocí tagu <table></table> sdělili, že chceme tvořit tabulku, a teď se konečně dostaneme k samotné tvorbě obsahu tabulky. Tabulky se v HTML vyplňují po řádcích, ve kterých se potom vyznačují jednotlivé buňky. Pro vyznačení řádku tabulky slouží párový tag <tr></tr>, který může obsahovat jen jednotlivé buňky tabulky.

I zde jsou ale atributy, kterými můžete ovlivnit data v tabulce. Atributem bgcolor="" můžete nastavit barvu pozadí pro celý řádek tabulky. Jako hodnotu můžete opět použít název barvy nebo její hexadecimální vyjádření. Tento atribut by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Můžete také nastavit zarovnání obsahu buněk na řádku horizontálně (atributem align="") a vertikálně (atributem valign=""). Pro align="" jsou povolené hodnoty

left

Text v buňkách bude zarovnán vlevo

center

Text v buňkách bude vycentrován

right

Text v buňkách bude zarovnán vpravo

justify

Text v buňkách bude zarovnán do bloku

char

Text v buňkách bude zarovnán podle znaku, který definujeme jako hodnotu atributu char="". Výchozí hodnotou je desetinná tečka resp. čárka (záleží na jazykovém prostředí). Pokud prohlížeč nepodporuje zarovnání "na znak" bude text v buňkách zarovnán jako by nebyla informace o zarovnání vůbec udána, tedy vlevo.

Pro valign="" jsou povolené hodnoty

top

Text v buňkách bude zarovnán "nahoru"

middle

Text v buňkách bude vertikálně vycentrován

bottom

Text v buňkách bude zarovnán dolů

baseline

Text v buňkách bude zarovnán na účaří (linka, na kterou se skládají písmena na řádku)

Kromě toho jsou povolené i tyto atributy

• id
• class
• lang
• dir
• title
• style
• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup

A existují ještě další, na které se zaměříme příště.

Buňky tabulky

HTML rozeznává dva typy buněk

Buňky se záhlavím tabulky

označujeme je párovým tagem <th></th>

Obyčejně buňky

označujeme je párovým tagem <td></td>

Pro oba dva platí ale v podstatě totéž, proto je probereme najednou.

U obou dvou můžeme atributem bgcolor="" nastavit barvu pozadí, která má vyšší prioritu než barva určená v elementech <table> a <tr> Tento atribut by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Dále můžete atributy width="" a height="" určit šířku a výšku buňky. Tyto atributy by se ale už neměly používat a v novějších verzích standardu už nebudou podporovány - lze je nahradit pomocí CSS.

Jsou zde povoleny nám už dobře známé atributy:

• id
• class
• lang
• dir
• title
• style
• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup

A ještě několik dalších, které si probereme v dalším díle.

Příklad

Ukážeme si jednoduchou tabulku zobrazující prodej imaginárního výrobku XY v letech 2001-2003

A takhle bude náš příklad vypadat na stránkách

Rok	Prodáno kusů XY
2001	1243
2002	968
2003	1513

Příště budeme pokračovat v tabulkách, podíváme se na různé způsoby jejich orámování.

Verze pro tisk