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: Software, Hardware, Programování, Internet Explorer, Jak, Buňka, Stráň, Díl, Shodná barva, Str, Sloupec, Šířka, Software na Heureka.cz



Konec českého poskytovatele internetu v přímém přenosu. Připomíná to krachující energetické firmy
Lukáš Václavík
CETINPoskytovatelé internetuPřipojení k internetu
T-Mobile ukazuje, že levné telefony se značkou operátora mohou mít znovu smysl

T-Mobile ukazuje, že levné telefony se značkou operátora mohou mít znovu smysl

** S rozvíjejícími se 5G sítěmi přichází čím dál levnější 5G telefony ** Na 5G konektivitě stojí podstatná část byznysu operátorů ** T-Mobile se jej rozhodl podpořit dvojicí brandovaných smartphonů

Jan Láska
5GPreviewT-Mobile
Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

** Google umí kromě vyhledávání i spoustu dalších věcí ** Vybrali jsme více než 15 užitečných funkcí a schopností ** Stačí zadat do vyhledávače ta správná klíčová slova

Karel Kilián
TipyVyhledávačeGoogle
Facebook má nejspíš vaše telefonní číslo, i když jste mu ho nikdy nedali. Tímto tajným nástrojem ho můžete smazat

Facebook má nejspíš vaše telefonní číslo, i když jste mu ho nikdy nedali. Tímto tajným nástrojem ho můžete smazat

**Meta poskytuje nástroj na vymazání telefonních čísel a e-mailových adres z Facebooku a Instagramu **V minulosti Mark Zuckebrg popřel, že by Facebook vytvářel stínové profily **Metě teď můžete sebrat klíčové iddentifikátory, pořád o vás ale nejspíš ví mnoho dalšího

Petr Urban
MetaSledováníSociální sítě
Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

** Dnešní telefony se předhánějí v tom, který z nich bude větší ** Malé telefony na trhu skoro vyhynuly... ** Čínská značka si připravila telefon do dlaně s třípalcovým displejem

Martin Chroust
InfraportKompaktní velikostSmartphony
Za WhatsApp se bude platit! Za předplatné dostanete funkci, která je u konkurence zadarmo

Za WhatsApp se bude platit! Za předplatné dostanete funkci, která je u konkurence zadarmo

** Bylo to jen otázkou času ** Už i WhatsApp nabízí prémiové předplatné ** Za poplatek dostanete funkci, která je u konkurence zadarmo

Martin Chroust
předplatnéWhatsAppMobilní aplikace
25 nejlepších filmových parodií, které můžete vidět. Víme, kde je najdete online

25 nejlepších filmových parodií, které můžete vidět. Víme, kde je najdete online

Filmové parodie jsou divácky velmi vděčné a mezi filmaři oblíbené. Tvůrci v nich mohou totiž zcela beztrestně vykrádat cizí díla a v jejich nápodobě popustit uzdu své fantazii. Vybrali jsme nejlepší zahraniční i české parodie.

Marek Čech
Filmy, které musíte vidět
Vyzkoušeli jsme levnou autodiagnostiku s Androidem. Servisy ohrnou nos, řidičům bude stačit

Vyzkoušeli jsme levnou autodiagnostiku s Androidem. Servisy ohrnou nos, řidičům bude stačit

** Smartphone s Androidem dnes využijete i pro autodiagnostiku ** Jednotku OBD-II dnes pořídíte za pár stovek ** Co se vše dokáže diagnostika s bezplatným SW v češtině?

Martin Chroust
DiagnostikaPro řidiče
Šedý trh s předplatným se vymyká kontrole. Spotify, Netflix nebo Disney+ můžete mít doslova za pár korun

Šedý trh s předplatným se vymyká kontrole. Spotify, Netflix nebo Disney+ můžete mít doslova za pár korun

** Sdílení účtů mezi kamarády je jen začátek ** Dnes letí nákupy předplatných v Indii nebo na Aliexpressu ** Superlevné „netflixy“ ale mohou nakonec spíš škodit

Lukáš Václavík
PředplatnéNetflixSpotify
Nový hit. Tahle appka vám udělá profilovku jako od pouličního ilustrátora

Nový hit. Tahle appka vám udělá profilovku jako od pouličního ilustrátora

** Aplikace NewProfilePic se na Androidu stala hitem ** Můžete si v ní vytvořit profesionálně vypadající profilovky ** Pozor ale na agresivní cenovou politiku za Pro verzi

Martin Chroust
FotografieUmělá inteligenceMobilní aplikace