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

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.
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.
Váš názor Další článek: Výuka angličtiny s Mean City

Témata článku: Hardware, Software, Programování, Internet Explorer, Jak, Stráň, Díl, Str, Šířka, Sloupec, Shodná barva, Buňka


Určitě si přečtěte

Zapomeňte na destičky. Raspberry Pi 400 je nový počítač zabudovaný do klávesnice
Lukáš Václavík
Raspberry PiPočítače
Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

** Chcete se teď hned naučit programovat čipy? ** Nechcete nic instalovat a číst zdlouhavé manuály? ** Naprogramujeme si Micro:bit, který zahraje Tichou noc

Jakub Čížek | 33

Jakub Čížek
Pojďme programovat elektronikuProgramování pro děti
Testy procesorů Ryzen 5000: AMD překonalo Intel ve všech směrech

Testy procesorů Ryzen 5000: AMD překonalo Intel ve všech směrech

** AMD začalo prodávat nové procesory Ryzen 5000 s architekturou Zen 3 ** K dispozici jsou nezávislé testy z celého světa ** AMD překonává Intel ve všech směrech

Karel Javůrek | 69

Karel Javůrek
ProcesoryTestyAMD
Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

** Obtěžují vás neustálé dotazy webů, zda chcete zobrazovat oznámení? ** Můžete je zakázat, a to jak kompletně, tak i pro jednotlivé stránky ** Připravili jsme návody pro Chrome, Firefox, Edge a Operu

Karel Kilián | 11

Karel Kilián
Jak na InternetTipyProhlížeče
Messenger a Instagram přicházejí v Evropě o funkce. Kvůli nové směrnici o soukromí
Vladislav Kluska
EvropaInstagramFacebook Messenger
Google chystá funkci, která z chytrého Gmailu udělá hloupý Gmail
Lukáš Václavík
SoukromíGmailGoogle

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5