Zprávy |  Hardware |  PDA |  MP3 |  Design |  Windows 98 |  Windows NT/2000 |  Vývoj |  Soubory |  Slovník |  Poradna |
 Hledání:
  
 Pokročilé  Máte problém?
Živě o počítačích a Internetu
Kanál pro kapesní počítače Živě si čte 574 lidí  
         
Soutěž o tričko Actrix - ZDE!
Vývoj
 Apache a IIS
 ASP a skripty
 HTML
 Průvodci
 Doporučené weby
 Výuka HTML

 EnglishEnglish

Živě
 Články za týden
 Nové příspěvky
 Nejčtenější články
 Ankety
 Autoři
 Reklama na Živě
 Kontakt na redakci
 Živě pro váš server
 Hledáme autory!
 Volná místa v IT

Nakupujte živě
Chessmaster 7000
JRC Interactive
Perfektní program pro začátečníky i pokročilé šachové hráče! Přes 12 let zůstal Chessmaster, jako první mezi interaktivními šachovými produkty pro šachové fajnšmekry, s více než 4 miliony prodaných kopií neporažen. ...

1439,00 Kč
Jak vytvářet www stránky - 12. díl
Karel Kilián HTML - 28. 2. 2000 0:00

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.
Pošli článek
Tiskni článek
Přidej názor
Textová inzerce
Volna-mista.cz: více než 1 600 pracovních príležitostí
Vltava: NEJLEVNĚJŠÍ hudební CD a DVD na českém trhu
Pauza: Ropa za zbraně?
FlashFun: bav se, hrej hry na Internetu a VYHRAJ super věci!
Sháníte mobilní telefon?: Vyberte si z bohaté nabídky za nejlepší ceny ...
Mobilmania: NOVÝ internetový časopis o mobilních telefonech a operátorech
Aktuální články
Slovník
Není vám jasný nějaký pojem? Zeptejte se slovníku Živě:

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.

Související články:

Zajímá-li vás bližší pohled na tento článek, podívejte se na něj v souvislostech.


 Diskusní fórum čtenářů (2 zprávy)
[Nový příspěvek][Vypsat vše]

Copyright 1996-2000 Computer Press, a.s., realizační tým