ZaRohem.cz Pražské metro Test osobnosti CowParade 2004 Praha MHD v ČR
Blog ZaRohem 1.PCRevue.cz Vinárna Na roli (Petřvald) Restaurace Třebovická role kapela Terra Ignota

Reklama
Hlavní stránka
Aktuality
Software
Internet
Hardware
Seriály
Viry
Tipy a triky
Download
Konference
Napište nám
Reklama
Doporučujeme užitečný crm systém od CÍGLER SOFTWARE!
Reklama
Tip na výkonný Macbook Pro 2017. Pořiďte si rychlý notebook s dlouhou výdrží.
10. leden 2000 - Seriály

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

Tabulky

Jak jsem slíbil v minulém díle, budeme se dnes věnovat poněkud náročnějšímu tématu - tabulkám. Protože toto téma je poněkud obsáhlejší, budeme se mu věnovat i v příštích dílech našeho seriálu.

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 1998rok 1999
jablka10'000 ks12'000 ks
hrušky7'500 ks8'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:

kovpříjemvýdej
zlato150 g140 g
stříbro675 g680 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
Tak, tabulku máme orámečkovanou, hlavičku zvýrazněnou, text je zarovnaný jak má být, co dál? Určitě bude celá tabulka vypadat lépe, když jí vyvedeme v barvách. Dnes zůstaneme pouze u barvy pozadí, kterou nastavujeme parametrem bgcolor (pokud jste četli předchozí lekci, můžete si pomocí tagu FONT obarvit i písmo). Syntaxe je zcela stejná, jako ve všech případech, kdy v HTML určujeme barvu - lze tedy použít buď slovního vyjádření, nebo hexadecimálního zápisu. Parametr bgcolor můžeme použít jak v tagu TABLE (určíme barvu pozadí pro celou tabulku), tak i v tagu TR (barva pozadí pro celý řádek) a TD (barva pozadí pro jednu buňku).

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

Hardware199719981999
Klávesnice111537
Myši393083
Tablety405948
Scannery227333
Celkem211021752226

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
To je pro dnešek vše. Do příštího týdne si zkuste vytvořit vlastní tabulky, formátujte je, měňte barvy a zkuste si různé způsoby zarovnání. Příště si představíme další parametry, s jejichž pomocí můžete dosáhnout ještě efektněji vyhlížejících tabulek.

Reklama
 
 
Aktuální články:
Reklama
Program eWay-CRM je praktické CRM řešení integrované přímo do Microsoft Outlooku.
 
 
Reklama
 
© 1.PC Revue.cz - všechna práva vyhrazena
ISSN: 1213-080X
© Karel Kilián ml.
Zásady ochrany osobních údajů
Reklama