Dokonalý layout va?í stránky & Tvorba tabulek

Autor: Ji?í Luká? <jirilukas(at)supersvet.cz>, Téma: HTML Helpík, Vydáno dne: 31. 10. 1998

Dokonalého layoutu (= dokonale uspo?ádané rozvr?ení a vyu?ití v?ech ploch na va?í web-stránce, stránka je p?ehledná a p?sobivá) na va?ich WWW stránkách m??ete dosáhnout r?znými zp?soby. Mezi nejpou?ívan?j?í metody bezesporu pat?í: tabulková - stránka jako jedna velká tabulka, obrázkové mapy, rámová - tzv. frames, atd.

Dokonalý layout va?í stránky

Asi nejefektivn?j?í metodou, jen? je také nej?ast?ji pou?ívána, je metoda vyu?ívající vlastností tabulek. Díky tabulce ?i tabulek lze celou web-stránku p?kn? rozvrhnout do n?kolika oddílu, do kterých lze následovn? umístit text, obrázky ?i odkazy.

Pozor! Tato metoda skrývá jedno velké nebezpe?í, které si musí ka?dý web-tv?rce uv?domit. V?echny internet-prohlí?e?e zobrazí tabulku, a? po jejím kompletním na?tení do své pam?ti. - U b??n? psané stránky dochází k pr?b??nému zobrazování, ?ili co si prohlí?e? stáhne, to vám taky hned uká?e. Ale jak jsem ji? psal vý?e, u tabulek je to jiné! I kdy? prohlí?e? na?te 99 % z celé tabulky, bude stále ?ekat na to 1 %, ne? dojde k zobrazení tabulky. Proto není vhodné, aby byla celá stránka tvo?ena pouze jednou jedinou tabulkou, její? stáhnutí z Internetu by bylo pro zájemce ?asov? neúnosné!

A te? ji? kone?n? k samotné tvorb? tabulek:

Tabulky se inicializují párovým tagem <TABLE> - tzn., ?e va?e definice tabulky za?ne tagem <TABLE> a skon?í tagem </TABLE>.

Syntaxe tagu TABLE:

<TABLE ALIGN="center/left/right" WIDTH=x("%") BACKGROUND="url" BGCOLOR="barva" BORDER=n BORDERCOLOR="barva" BORDERCOLORDARK="barva" BORDERCOLORLIGHT="barva" CELLSPACING=n CELLPADDING=n COLS=n>

Pro nadepsání tabulky je ur?en párový tag <CAPTION>. Zarovnání nadpisu m??ete ur?it za pomoci atributu ALIGN, který m??e nabýt hodnoty: left, right, top, nebo bottom.

P?i tvorb? struktury tabulky se v HTML jazyce pou?ívají následující t?i tagy:

  1. TR = definuje vlastnoti ?ady tabulky,
  2. TD = definuje obsah bu?ky (polí?ka tabulky),
  3. TH = definuje hlavi?ku tabulky.

?ádky tabulky se vytvá?ejí (definují) párovým tagem <TR>. Podle po?tu nalezených párových tag? <TR> pak ka?dý prohlí?e? ur?í, kolik ?ádk? daná tabulka obsahuje.

Syntaxe tagu TR:

<TR ALIGN="center/left/right" BGCOLOR="barva" BORDERCOLOR="barva" BORDERCOLORDARK="barva" BORDERCOLORLIGHT="barva" NOWRAP VALIGN="middle/top/bottom/baseline">

Nejmen?í ?ást tabulky - bu?ku - inicializujeme párovým tagem <TD>. Ka?dý jednotlivý pár tagu <TD> formátuje pouze jednu bu?ku. Uvnit? tagu <TD>, m??eme vyu?ít k formátování textu uvnit? bu?ky libovolný tag na formátování textu, nebo m??eme do bu?ky umístit odkaz, ?i obrázek.

Syntaxe tagu TD:

<TD ALIGN="center/left/right" BACKGROUND="url" BGCOLOR="barva" BORDERCOLOR="barva" BORDERCOLORDARK="barva" BORDERCOLORLIGHT="barva" NOWRAP COLSPAN=n ROWSPAN=n HEIGHT=n WIDTH=n VALIGN="middle/top/bottom/baseline">

Pro hlavi?ku tabulky je v HTML jazyce k dispozici párový tag <TH>, který se vno?uje do prvního ?ádku tabulky (ur?en tagem <TR>). Tag <TH> se ?ídí zcela stejnými pravidly jako tag <TD>. Jediným rozdílem je, ?e je implicitn? p?ednastaven na tu?né písmo a text je automaticky zarovnáván na st?ed.

Jak sami vidíte, není tvorba tabulek nikterak obtí?nou zále?itostí - pouze si jen musíte um?t vybrat ty správné atributy a tagy ve správnou chvíli.

A pokud jste p?eci jen propadli men?í panice, nic si z toho ned?lejte a za?n?te vytvá?et tabulky od t?ch nejjednodu??ích (nap?. dvou?ádkových) a uvidíte, ?e tomu p?ijdete sami na chuť!




Copyright supersvet.cz, 1998-2005