HTML (8) - tabulky

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

29.7.2004 15:00 | Pavel Kácha | přečteno 38548×

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:

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

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:

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

<table border="1" align="center">
  <tr>
    <th>Rok</th>
    <th>Prodáno kusů XY</th>
  </tr>
  <tr>
    <td>2001</td>
    <td>1243</td>
  </tr>
  <tr>
    <td>2002</td>
    <td>968</td>
  </tr>
  <tr>
    <td>2003</td>
    <td>1513</td>
  </tr>
</table>

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í.

Online verze článku: http://www.linuxsoft.cz/article.php?id_article=305