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ží | říjen | listopad | prosinec |
|---|
| jablka | 10 | 20 | 15 |
| hrušky | 15 | 25 | 35 |
| pomeranče | 5 | 5 | 5 |
| citróny | 16 | 18 | 20 |
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ěr | Hnědé oči |
|---|
| váha | výška |
|---|
| muži | 75 | 182 | 40% |
|---|
| ženy | 60 | 170 | 43% |
|---|
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.
|
