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

V minulém díle jsme se zaměřili trochu více na teorii, které se budeme věnovat i dnes, a pak si ukážeme, jak můžete tabulky prakticky využít při formátování www stránek.
V minulém díle jsme se zaměřili trochu více na teorii, které se budeme věnovat i dnes, a pak si ukážeme, jak můžete tabulky prakticky využít při formátování www stránek.

Jaké tagy tedy ještě můžete v tabulkách použít:

Tag CAPTION
Tento párový tag, určující titulek tabulky, lze zapsat výhradně za tag TABLE. Umístění nadpisu definujete parametrem align, který může mít hodnoty:

  • top - nadpis je umístěn nad tabulkou
  • bottom - nadpis je umístěn pod tabulkou
  • left - nadpis je umístěn vlevo od tabulky
  • right - nadpis je umístěn vpravo od tabulky

Tagy THEAD, TBODY a TFOOT
Tyto tagy jsou podporované od HTML 4.0 a jejich význam spočívá v rozdělení tabulky do logických sekcí. Sekce THEAD specifikuje hlavičku tabulky, TBODY samotnou tabulku a TFOOT patičku. Pokud se rozhodnete pro tento způsob definování tabulky, pak mějte na paměti, že tyto tagy se zapisují v pořadí hlavička - patička - tabulka (nebo tabulky). Tabulka by podle nové normy měla vypadat následujícím způsobem:

<TABLE>
<THEAD>
<TR> hlavička tabulky
</THEAD>
<TFOOT>
<TR> patička tabulky
</TFOOT>
<TBODY>
<TR> první řádek první části tabulky
<TR> druhý řádek první části tabulky
</TBODY>
<TBODY>
<TR> první řádek druhé části tabulky
<TR> druhý řádek druhé části tabulky
<TR> třetí řádek druhé části tabulky
</TBODY>
</TABLE>
Všechny tyto tagy dovolují definovat vlastnosti vybrané oblasti.
  • align - horizontální zarovnání textu.
  • valign - vertikální zarovnání textu.
  • char - znak, na který bude text v buňce zarovnán (např.: char="," zarovná všechny buňky v dané oblasti na desetinou čárku).
  • charoff - odsazení znaku specifikovaného v atributu char.

Tagy COLGROUP a COL
Zatímco k horizontálnímu rozdělení tabulky na logické celky slouží tagy THEAD, TFOOT a TBODY, k vertikálnímu dělení se používají tagy COLGROUP a COL, které je nutné zařadit ještě před první řádek tabulky.

Zjednodušeně řečeno - COLGROUP spojuje sloupce, které spolu logicky souvisejí, do větších celků, tag COL pak využijeme k jemnějšímu definování vlastností sloupců (často se používá pouze tag COLGROUP, který k definování sloupců plně postačuje).

U obou tagů lze definovat vlastnosti pro několik sloupců současně, k čemuž slouží atribut span, který prohlížeči říká, na kolik sloupců se příslušné nastavení vztahuje.

Kromě zarovnávacích parametrů, které jsme si vysvětlili u předchozích tagů, lze v tomto tagu pomocí atributu width nastavit ještě šířku sloupců.

Použití tagu COLGROUP si nejlépe vysvětlíme na příkladu

<TABLE border=1>
<COLGROUP span=1 align="left" width=100><COLGROUP span=3 align="right" width=75>
<TR align="center"><TH>Zboží</TH><TH>říjen</TH><TH>listopad</TH><TH>prosinec</TH></TR>
<TR><TD>jablka</TD><TD>10</TD><TD>20</TD><TD>15</TD></TR>
<TR><TD>hrušky</TD><TD>15</TD><TD>25</TD><TD>35</TD></TR>
<TR><TD>pomeranče</TD><TD>5</TD><TD>5</TD><TD>5</TD></TR>
<TR><TD>citróny</TD><TD>16</TD><TD>18</TD><TD>20</TD></TR>
</TABLE>
Jak můžete poznat ze zdrojového kódu, bude text v prvním sloupci zarovnán doleva a tento sloupec bude široký 100 pixelů, zbývající tři sloupce budou zarovnány doprava a budou široké 75 pixelů. Výjimkou je obsah buněk v prvním řádku, který je diky parametru align="center" v tagu TR vycentrován.

Výsledek vypadá následovně:

Zbožíříjenlistopadprosinec
jablka102015
hrušky152535
pomeranče555
citróny161820

Slučování buněk
HTML umožňuje slučování buněk z více řádků a/nebo sloupců do jedné buňky. K tomu slouží atributy colspan a rowspan, jež můžete zapsat do tagu TH nebo TD. Hodnota těchto atributů udává, přes kolik řádek a/nebo sloupců se buňka rozkládá. Je možné použít jeden nebo oba atributy - v druhém případě se buňka bude rozkládat přes více řádků i více sloupců. Místo dlouhého popisu bude lepší použít názorný příklad:

<TABLE border="1">
<TR><TH rowspan="2"> </TH><TH colspan="2">Průměr</TH><TH rowspan="2">Hnědé oči</TH></TR>
<TR><TH>váha</TH><TH>výška</TH></TR>
<TR><TH>muži</TH><TD>75</TD><TD>182</TD><TD>40%</TD></TR>
<TR><TH>ženy</TH><TD>60</TD><TD>170</TD><TD>43%</TD></TR>
</TABLE>
Výsledek vypadá takto:

 PrůměrHnědé oči
váhavýška
muži7518240%
ženy6017043%

Poznámka: V tabulkách není vhodné definovat prázdné buňky stylem <TD></TD> ani <TD> </TD> (tedy s mezerou), neboť takové buňky nezobrazí všechny prohlížeče shodně. Použijte raději neviditelnou mezeru  , která zajistí, že prázdná buňka bude vždy zobrazena korektně.

Využití tabulek
Tabulky můžete využít především k přesnému umístění textu a grafiky na stránku. Budete-li například chtít, aby text začínal 100 pixelů od levého okraje stránky a končil 150 pixelů od pravého okraje, je nejlepším způsobem vytvořit si tabulku s nulovou šířkou rámečků. Důležité je v tomto případě nezapomenout nastavit šířku tabulky na 100% šířky stránky.

<TABLE border=0 width=100%>
<TR><TD width=100>nbsp;</TD><TD>sem přijde vlastní text</TD><TD width="150> </TD></TR>
</TABLE>
Další způsob využití tabulky je vytvoření ovládacích prvků, u kterých záleží na přesném umístění. Například vodorovnou navigační lištu lze vytvořit tímto způsobem.

<TABLE border=0 width=100%>
<TR><TD width=10% align="center"><a href="odkaz1.htm">popis1</A></TD>
<TD width=10% align="center"><a href="odkaz2.htm">popis2</A></TD>
<TD width=10% align="center"><a href="odkaz3.htm">popis3</A></TD>
. . . . .
<TD width=10% align="center"><a href="odkaz9.htm">popis9</A></TD>
<TD width=10% align="center"><a href="odkaz10.htm">popis10</A></TD></TR>
</TABLE>
Díky tomu, že jsme nepoužili absolutní ale procentuální určení šířky buněk, bude při libovolném rozlišení ovládací lišta zabírat celou šíři obrazovky a jednotlivé ovládací prvky budou vždy stejně široké.

V případě, že se místo prostých textových odkazů rozhodnete použít jako odkaz obrázek, můžete pomocí tabulek vytvořit například obrázkovou mapu složenou z několika částí, které budou odkazovat na různé objekty. V takovém případě doporučujeme určovat nejen velikost jednotlivých buněk, ale i samotných obrázků - zajistíte tím rychlejší zobrazení stránky v prohlížeči.

Využití tabulek při navrhování vzhledu stránek je skutečně široké - stačí se podívat na zdrojové kódy stránek několika serverů. Uvidíte, že ačkoli jednotlivé weby vypadají zcela odlišně, v drtivé většině případů jsou stránky tvořeny tabulkami.

Diskuze (2) Další článek: Ďábelsky rychlé disky

Témata článku: Software, Prohlížeče, Programování, Libovolné rozlišení, První případ, Příslušné nastavení, Přesná hodnota, Šířka, Jednotlivá buňka, Rozdělená stránka, Buňka, Druhá sekce, Str, Díl, Sloupec, Jak, První parametr, Stráň, Textový odkaz, Software na Heureka.cz



Nejlepší sluchátka, myši, klávesnice… Vybíráme osvědčený herní hardware pod stromeček

Nejlepší sluchátka, myši, klávesnice… Vybíráme osvědčený herní hardware pod stromeček

Důležitým parametrem herních sluchátek je pohodlnost a bezdrátová konektivita. U myší vybírejte podle oblíbeného žánru i ergonomie. Klávesnice kupujte ty mechanické a koukejte na jazyk potisku.

Stanislav Janů
Hardware
Nejlepší notebooky do 13 tisíc. Jsou to překvapivě použitelné stroje a můžete mít i OLED

Nejlepší notebooky do 13 tisíc. Jsou to překvapivě použitelné stroje a můžete mít i OLED

** I za částku do třinácti tisíc korun lze pořídit vysoce použitelný notebook ** Výrobci i sem začali osazovat šestijádrové procesory ** Kompromisům se nevyhnete, nejsou ale tak výrazné jako dřív

Stanislav Janů
Notebooky
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
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ě
Tuto českou základnu plnou satelitů nesmíte vidět. V Mapy.cz je každá anténa pečlivě vyretušovaná

Tuto českou základnu plnou satelitů nesmíte vidět. V Mapy.cz je každá anténa pečlivě vyretušovaná

** Zapomeňte na rozčtverečkovaná místa, kterých si každý všimne ** Mapy.cz musely dokonale zakrýt desítky parabol ** Základnou se přitom na webu chlubí i její majitel. Kocourkov

Jakub Čížek
ČeskoMapy.czMapy
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
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
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
Starlink překvapivě zlevňuje. I v Česku teď satelitní internet stojí o polovinu méně
Karel Kilián
StarlinkPoskytovatelé internetuPřipojení k internetu