Jak vytvářet www stránky - 10. díl

Tabulky

K vytvoření jednoduché tabulky vystačíte se třemi párovými tagy - TABLE, TR a TD. Tag TABLE označuje začátek (resp. jeho uzavírací část konec) tabulky, tag TR začátek/konec řádku a tag TD začátek/konec buňky. Jak jste si možná všimli, neobsahuje HTML žádný tag pro definování sloupce - tabulky se totiž definují po řádcích a vlastnosti sloupců se nastavují buď automaticky (tj. odvodí se na základě vlastností jednotlivých buněk), nebo je můžete ovlivnit přímo patřičným nastavením parametrů buněk.

Jednoduchá tabulka se třemi řádky a třemi sloupci by tedy mohla vypadat následovně:

<TABLE>
<TR><TD>zboží</TD><TD>rok 1998</TD><TD>rok 1999</TD></TR>
<TR><TD>jablka</TD><TD>10'000 ks</TD><TD>12'000 ks</TD></TR>
<TR><TD>hrušky</TD><TD>7'500 ks</TD><TD>8'000 ks</TD></TR>
</TABLE>

Výsledek bude vypadat následovně:

zboží	rok 1998	rok 1999
jablka	10'000 ks	12'000 ks
hrušky	7'500 ks	8'000 ks

První, čeho si všimnete (používáte-li MS Internet Explorer) je, že tabulka je zobrazena bez mřížky. Ve skutěčnosti zde sice mřížka je, ale má nulovou šířku, takže jí budete muset nastavit. K tomu slouží parametr border, který umístíte do elementu TABLE (naříklad <TABLE border=2>). Na tento parametr byste neměli zapomínat, protože v případě jeho vynechání zobrazují některé prohlížeče tabulku s mřížkou různé šířky (Netscape Navigator například používá šířku mřížky 2).

Jak sami jistě uznáte, že ani poté nevypadá tabulka přiliš pěkně. Možná by stálo za to, zvýraznit záhlaví. K tomu slouží párový tag TH, kterým nahradíte tag TD všude tam, kde chcete odlišit obsah buňky od ostatních (ve většině prohlížečů je text v takto definované buňce odlišen tučným písmem a zarovnáním na střed). Obecně se tento tag používá pro záhlaví tabulky. Syntaxe tagu TH je zcela shodná s tagem TD.

Teď už je to o něco lepší, ale položky označující počet kusů ovoce by lépe vypadaly, kdyby byly zarovnané k pravému okraji buňky. Ani to není problém: stačí použít parametr align v tagu TD. Tento parametr může mít hodnotu left (zarovnání k levému okraji), center (zarovnání na střed) nebo right (zarovnání k pravému okraji). Buňky s čísly tedy upravíme následovně: <TD align="right">.

Parametr align můžeme použít nejen v tagu TD, kde určuje zarovnání obsahu buňky, ale i v tagu TR či TABLE. V prvním případě se nastavuje zarovnání všech buněk v řádku, v druhém případě pak volíte umístění tabulky vzhledem k okrajům stránky. Je důležité si zapamatovat, že určující je vždy parametr menšího segmentu tabulky, to znamená, že necháte-li všechny buňky v řádku zarovnat doleva a jednu nebo více buněk tohoto řádku zarovnáte doprava, má definice zarovnání příslušných buněk přednost před definicí celého řádku. Nejlépe si to můžete ověřit na následujícím příkladě:

<TABLE border=2>
<TR><TH>kov</TH><TH>příjem</TH><TH>výdej</TH></TR>
<TR align="right"><TD align="left">zlato</TD><TD>150 g</TD><TD>140 g</TD></TR>
<TR align="right"><TD align="left">stříbro</TD><TD>675 g</TD><TD>680 g</TD></TR>
</TABLE>

Bunky ve druhém a třetím řádku budou zarovnané na pravý okraj, ovšem buňky v prvním sloupci mají nastaveno zarovnání k levému okraji a protože buňka je menší segment, než řádek (viz. naše definice výše), bude jejich obsah zarovnán doleva. Buňky ve druhém a třetím sloupci nemají nastaveno žádné zarovnání, takže převezmou zarovnání, které platí pro celý řádek.

Zde vidíte výsledek:

kov	příjem	výdej
zlato	150 g	140 g
stříbro	675 g	680 g

Velice podobný je parametr valign, který můžete použít v tagu TR a TD, nikoli ovšem v TABLE. Na rozdíl od parametru align, který určuje jak bude obsah buňky umístěn v horizontálním směru, používáme valign pro umístění obsahu buňky ve vertikálním směru. Tento parametr může mít následující hodnoty:

• top - obsah buňky je zarovnán k jejímu hornímu okraji
• middle - obsah buňky je zarovnán na střed (pozor, mnoho tvůrců webových stránek se dopuští chyby a používá center, což je v tomto případě nepřípustná hodota)
• bottom - obsah buňky je zarovnán k dolnímu okraji
• baseline - zarovnání na společnou základnu

Vytvoříme si tabulku, v níž aplikujeme většinu věcí, které jsme se dnes naučili:

<TABLE border=2 bgcolor="#EFCC03" align="center">
<TR bgcolor="#EBE125"><TH>Hardware</TH><TH>1997</TH><TH>1998</TH><TH>1999</TH></TR>
<TR align="right"><TD align="left">Klávesnice</TD><TD>11</TD><TD>15</TD><TD bgcolor="#EDDE74">37</TD></TR>
<TR align="right"><TD align="left">Myši</TD><TD>39</TD><TD>30</TD><TD bgcolor="#EDDE74">83</TD></TR>
<TR align="right"><TD align="left">Tablety</TD><TD>40</TD><TD bgcolor="#EDDE74">59</TD><TD>48</TD></TR>
<TR align="right"><TD align="left">Scannery</TD><TD>22</TD><TD bgcolor="#EDDE74">73</TD><TD>33</TD></TR>
<TR align="right" bgcolor="#C0C0C0"><TD align="left">Celkem</TD><TD>2110</TD><TD>2175</TD><TD>2226</TD></TR>
</TABLE>

Zde vidíte výsledek. Pro porovnání srovnejte tuto tabulku s tou, kterou jsme si vytvořili na začátku dnešního dílu - rozdíl je více než patrný.

Hardware	1997	1998	1999
Klávesnice	11	15	37
Myši	39	30	83
Tablety	40	59	48
Scannery	22	73	33
Celkem	2110	2175	2226

Na závěr si stručně zopakujeme tagy a jejich parametry, které byste již měli ovládat

• TABLE - definuje začátek a konec tabulky
  • border - šířka mřížky
  • align - zarovnání tabulky vzhledem ke krajům stránky
  • bgcolor - barva pozadí celé tabulky
• TR - definuje začátek a konec řádku
  • align - horizontální zarovnání obsahu buněk na celém řádku
  • valign - vertikální zarovnání obsahu buněk na celém řádku
  • bgcolor - barva pozadí všech buněk na řádku
• TD - definuje začátek a konec buňky (event. TH - buňka záhlaví)
  • align - horizontální zarovnání obsahu buňky
  • valign - vertikální zarovnání obsahu buňky
  • bgcolor - barva pozadí buňky