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

Dnes se budeme věnovat teorii a podíváme se podrobně na všechny parametry, které můžete při tvorbě tabulek potřebovat.
V minulém díle jsme si vysvětlili, že k vytvoření tabulky vystačíme se třemi základními tagy - TABLE, TR a TD. Zmínili jsme také některé parametry, s jejichž pomocí je možné určit zarovnání obsahu buňky, barvy či třeba šířku mřížky. Dnes se budeme věnovat teorii a podíváme se podrobně na všechny parametry, které můžete při tvorbě tabulek potřebovat.

Tag TABLE
  • align - zarovnání tabulky vzhledem k okrajům stránky. Tento parametr může nabývat hodnot left (doleva), right (doprava) nebo center (na střed).
  • bgcolor - barva pozadí buněk celé tabulky.
  • border - tento parametr se používá k určení šířky rámečku celé tabulky. Je nutné jej uvádět i v případě, že chcete tabulku zobrazit bez mřížky, protože některé prohlížeče, v případě opomenutí tohoto parametru, dosazují vlastní šířku.
  • cellpadding - specifikuje vzdálenost obsahu buňky od okraje mřížky. Implicitní hodnota je 1.
  • cellspacing - specifikuje vzdálenost mezi jednotlivými buňkami tabulky. Implicitní hodnota je 2.
  • frame - určuje, která část vnějšího rámečku tabulky bude zobrazena. K dispozici jsou následující hodnoty:
    • void - tabulka bez rámečku
    • above - pouze horní okraj
    • below - pouze dolní okraj
    • hsides - horní a dolní okraj
    • vsides - levý a pravý okraj
    • lhs - pouze levý okraj
    • rhs - pouze pravý okraj
  • rules-určuje, které části mřížky budou zobrazeny uvnitř tabulky
    • none - žádná mřížka nebude zobrazena
    • groups - mřížka bude zobrazena pouze u skupin řádek a skupin sloupců definovaných tagy THEAD, TFOOT, TBODY, COLGROUP a COL (o nich si povíme v další lekci)
    • rows - zobrazí mřížku pouze mezi řádky
    • cols - zobrazí mřížku pouze mezi sloupci
    • all - zobrazí celou vnitřní mřížku
  • width - určuje šířku celé tabulky. Udává se v pixelech (např. width=550), nebo v procentech aktuální šířky stránky (např. width=95%). Druhý případ má tu výhodu, že se tabulka přizpůsobí aktuálnímu rozlišení a velikosti okna browseru návštěvníka. V případě, že tento parametr vynecháte, nebo nastavíte příliš nízkou hodnotu, vypočítá si jej prohlížeč sám na základě součtu šířek nejširších buněk v každém sloupci.
  • summary - základní informace o účelu a struktuře tabulky, které využijí především nevidomí uživatelé využívající browsery využívající hlasu nebo Braillova písma.

Tag TR
  • align - určuje horizontální zarovnání obsahů buněk v řádku (left=doleva, right=doprava, center=na střed)
  • valign - určuje vertikální zarovnání obsahů buněk v řádku (top=k hornímu okraji, middle=na střed, bottom=dolů, baseline=text je zarovnán na společnou základnu)
  • bgcolor - barva pozadí buněk v řádku

Tag TH a TD
  • align - horizontální zarovnání obsahu buňky (hodnoty jsou stejné jako u tagu TR)
  • axis - pojmenování obsahu buňky (má využití zejména v databázových aplikacích, které odkazují na buňku jménem)
  • bgcolor - barva pozadí buňky
  • collspan - určuje, přes kolik sloupců se buňka rozprostírá (tomuto tématu se budeme věnovat v příští lekci)
  • height - výška buňky. Opět se určuje buď v pixelech, nebo relativně v procentech. Zvolíte-li procentuální zadání, vztahuje se tato hodnota k výšce aktuálního okna prohlížeče. Výška nejvyšší buňky určuje výšku celého řádku, není tedy nutné určovat výšku u každé buňky zvlášť.
  • nowrap - nemá žádnou hodnotu. Zapsání tohoto parametru určuje, že obsah buňky nesmí být zalomen na více řádků.
  • rowspan - určuje, přes kolik řádků se buňka rozprostírá (více v příští lekci)
  • valign - vertikální zarovnání obsahu buňky (hodnoty jsou stejné jako u tagu TR)
  • width - šířka buňky. Určuje se buď v pixelech, nebo v procentech relativně k šířce tabulky. Určíme-li například v tagu TABLE šířku tabulky na 500 pixelů, způsobí parametr width="10%", že buňka bude široká 50 pixelů.
V některých učebnicích HTML se můžete setkat s řadou dalších parametrů, ale ty nejsou uvedeny v normě HTML 4.0, takže je mohou různé prohlížeče zobrazovat různým způsobem, nebo je prostě mohou ignorovat.

Pro tento týden, myslím, stačí. Příště se podíváme na to, jak se dají formátovat sloupce, jak se sdružují části tabulky do celků, či jak například můžete spojit několik buněk v tabulce dohromady.

Váš názor Další článek: WebCam Go – nejen na baterky

Témata článku: Software, Prohlížeče, Programování, Axis, Pravé okno, Horní okno, Browser, Sloupec, Buňka, Stejné parametry, Jednotlivá buňka, Základní struktura, LHS, Pravý okraj, Díl, Jak, Nízká výška, Str, Šířka, Stráň, Rámeček, Software na Heureka.cz



Mohli Inuité vyrobit nůž z vlastních zmrzlých exkrementů? Antropologové při experimentu jen „kreslili hnědou pastelkou“

Mohli Inuité vyrobit nůž z vlastních zmrzlých exkrementů? Antropologové při experimentu jen „kreslili hnědou pastelkou“

** Deníky polárníků jsou plné neuvěřitelných příběhů ze života Inuitů ** Některé tvrdí, že dokážou vyrobit ostrý nůž ze zmrzlých exkrementů ** Američtí antropologové to ověřili experimentem

Jaroslav Petr
Archeologie
Toto je nejzajímavější telefon za tři tisíce. Smartphonu do terénu chybí snad jen podpora 5G sítí a 3,5mm jack

Toto je nejzajímavější telefon za tři tisíce. Smartphonu do terénu chybí snad jen podpora 5G sítí a 3,5mm jack

** Odolný telefon dnes nemusí stát mnoho ** Robustní novinka od BlackView nestojí ani tři tisíce **Nenáročným uživatelům zřejmě nic podstatného chybět nebude

Martin Chroust
BlackViewZvýšená odolnostSmartphony
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
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
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
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
Windows 2.0 mají 35. narozeniny. Nainstalovali jsme je. Chybí hlavní panel, ale okna už se překrývají

Windows 2.0 mají 35. narozeniny. Nainstalovali jsme je. Chybí hlavní panel, ale okna už se překrývají

**Windows 2.0 byly představeny 9. prosince 1987. **Oproti předchůdci se okna mohla překrývat a plochu začaly plnit ikony. **Centrálním bodem platformy byl správce souborů, nechyběly některé klasické nástroje jako Malování.

Petr Urban
Operační systémyMicrosoftWindows