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í, Browser, Šířka, Rámeček, Základní struktura, Axis, Pravé okno, Sloupec, LHS, Nízká výška, Stejné parametry, Str, Horní okno, Jednotlivá buňka, Buňka, Stráň, Pravý okraj, Jak, Díl


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

Elon Musk podpořil Signal jako náhradu WhatsAppu. Aplikaci okamžitě zavalili uživatelé
Markéta Mikešová
WhatsAppElon MuskFacebook
10 míst na mapách Googlu, která nesmíte vidět. Nahradily je čtverečky

10 míst na mapách Googlu, která nesmíte vidět. Nahradily je čtverečky

** Deset míst, které nesmíte vidět ve webových mapách ** Jsou to letiště, základny i elektrárny ** Nejvíce míst tají Francie

Jakub Čížek | 21

Jakub Čížek
Mapy GoogleMapy
Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 4

redakce
Mapy GoogleStreet View
Vodafonu se zhroutila kabelovka. Síť bývalého UPC má výpadky
Lukáš Václavík
VodafoneUPC
Nejlepší notebooky do 20 000 Kč. Tipy, co se dnes vyplatí koupit

Nejlepší notebooky do 20 000 Kč. Tipy, co se dnes vyplatí koupit

** S cenou do 20 tisíc lze vybrat solidní notebook na práci i hry ** Přenosné notebooky nabídnou i kovová těla a rychlý hardware ** Možná největší problém je nedostupnost, nejžádanější kusy jsou vyprodané

David Polesný | 33

David Polesný
VánoceNotebooky

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5