ZaRohem.cz Pražské metro Test osobnosti CowParade 2004 Praha MHD v ČR
Blog ZaRohem 1.PCRevue.cz Vinárna Na roli (Petřvald) Restaurace Třebovická role kapela Terra Ignota

Reklama
Hlavní stránka
Aktuality
Software
Internet
Hardware
Seriály
Viry
Tipy a triky
Download
Konference
Napište nám
Reklama
Doporučujeme užitečný crm systém od CÍGLER SOFTWARE!
Reklama
Tip na výkonný Macbook Pro 2017. Pořiďte si rychlý notebook s dlouhou výdrží.
24. leden 2000 - Seriály

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.

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">&nbsp;</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 &nbsp;, 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.

Reklama
 
 
Aktuální články:
Reklama
Program eWay-CRM je praktické CRM řešení integrované přímo do Microsoft Outlooku. Vyzkoušejte Outlook CRM i vy!
 
 
Reklama
 
© 1.PC Revue.cz - všechna práva vyhrazena
ISSN: 1213-080X
© Karel Kilián ml.
Zásady ochrany osobních údajů
Reklama