Zprávy  |  Hardware |  PDA |  MP3 |  Design |  Windows 98 |  Windows NT/2000 |  Vývoj |  Soubory |  Poradna |  Slovník Živě si čte 159 lidí  
 Hledání:
  
 Pokročilé  Máte problém?
Živě o počítačích a Internetu
centrum.cz



Vývoj
Apache a IIS
ASP a skripty
HTML
Průvodci
Doporučené weby

English English

Živě
Články za týden
Nové příspěvky
Nejčtenější články
Ankety
Autoři
Reklama na Živě
Kontakt na redakci
Hledáme autory!
Volná místa v IT

Nakupujte živě
Jak na počítač - Poznáváme Internet
Jiří Hlavenka, Computer Press
Poznáváme Internet: připojujeme se, pracujeme s internetovým prohlížečem Internet Explorer, poznáváme zajímavá místa na českém i světovém Internetu… a jsme občany digitálního světa!  ...

55,00 Kč
Jak vytvářet www stránky - 10. díl
Karel Kilián HTML - 14. 2. 2000 0:00

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 skutečnosti zde sice mřížka je, ale má nulovou šířku, takže ji 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, ani poté nevypadá tabulka příliš 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>
Buňky 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 dopouští chyby a používá center, což je v tomto případě nepřípustná hodnota)
  • 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ž ji 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 úplně 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.

Související články:

Zajímá-li vás bližší pohled na tento článek, podívejte se na něj v souvislostech.


Přidejte k článku svůj názor

Pošli článek
Tiskni článek
Přidej názor
Textová inzerce
Pauza: čtěte rozhovor s Robertem Zárubou.
Aukce: zcela nový způsob přihazování.
Poslední minuta: už víte kam pojedete na dovolenou?
Istore.cz: Nejlevnější spotřební materiál pro kopírky, tiskárny.
Aktuální články
Slovník
Není vám jasný nějaký pojem? Zeptejte se slovníku Živě:

Copyright 2000 Computer Press, realizační tým