HTML - část IV. - tabulky - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » Web  

4. ledna 2001, 00.00 | V dnešním článku se podíváme trochu blíže na tvorbu tabulek v HTML - ty se nejčastěji používají pro rozdělení stránky do sloupců a tím pádem se stávají jedním ze základních elementů dnešních webových stránek.

V dnešním článku se podíváme trochu blíže na tvorbu tabulek v HTML - ty se nejčastěji používají pro rozdělení stránky do sloupců a tím pádem se stávají jedním ze základních elementů dnešních webových stránek.

Celá tabulka se uzavírá do párového tagu TABLE s následující syntaxí:

<TABLE ALIGN="zarovnání" BACKGROUND="obrázek na pozadí" BGCOLOR="barva pozadí" BORDER="rámeček" BORDERCOLOR="barva rámečku" BORDERCOLORDARK="barva tmavší části rámečku" BORDERCOLORLIGHT="barva světlejší části rámečku" CELLPADDING="okraj buňky" CELLSPACING="vzdálenost mezi buňkami" COLS="počet sloupců" FRAME="VOID|ABOVE|BELLOW|HSIDES|VSIDES|RHS|LHS" RULES="NONE|BASIC|ROWS|COLS|ALL" WIDTH="šířka" VALIGN="vertikální zarovnání">vlastní obsah tabulky</TABLE>

Parametr ALIGN určuje zarovnání tabulky a může nabývat hodnot LEFT (na levo), CENTER (na střed) a RIGHT (na pravo). Parametr BACKGROUND definuje obrázek na pozadí tabulky, jeho hodnotou je absolutní nebo relativní cesta k tomuto obrázku. Parametr BGCOLOR definuje barvu pozadí tabulky (formátem #RRGGBB nebo názvem barvy). Pokud jsou přítomny oba parametry, má BACKGROUND přednost. Parametr BORDER udává tloušťku rámečku v pixelech, parametr BORDERCOLOR potom barvu rámečku. Na rámečky kolem tabulky je však třeba dávat si pozor, protože oba hlavní prohlížeče je stínují. Tato vlastnost se dá u Internet Exploreru odstranit parametry BORDERCOLORLIGHT a BORDERCOLORDARK, které nastavují barvu světlejší, respektive tmavší části rámečku. Ty však nepodporuje Netscape Navigator. Jak se zbavit tohoto problému si ukážeme na konci dnešního článku. Dalšími parametry tagu TABLE jsou potom CELLPADDING a CELLSPACING. První určuje vzdálenost mezi okrajem buňky a obsahem buňky, druhý potom vzdálenost mezi buňkami. Dalším parametrem je COLS - určuje počet sloupců tabulky, nemusí se zadávat. Následující dva parametry nepodporuje Netscape Navigator - FRAME (řídí vnější rámeček tabulky) a RULES (řídí vnitřní rámečky tabulky). Parametr WIDTH určuje šířku tabulky v pixelech nebo procentech a konečně VALIGN určuje vertikální zarovnání - může nabývat hodnot BOTTOM (pro zarovnání ke dnu) nebo TOP (pro zarovnání na vrch).

Samotná tabulka se potom vytváří párovými tagy TR a TD. TR vytváří řádky tabulky a má následující syntaxi:

<TR ALIGN="zarovnání" BACKGROUND="obrázek na pozadí" BGCOLOR="barva pozadí" BORDERCOLOR="barva rámečku" BORDERCOLORDARK="barva tmavší části rámečku" BORDERCOLORLIGHT="barva světlejší části rámečku" VALIGN="vertikální zarovnání">vlastní obsah řádky</TR>

Parametry mají stejné hodnoty i funkce jako u TABLE, jen s tím rozdílem, že platí jen pro danou řádku tabulky.

Buňky tabulky se vytváří pomocí párového tagu TD s následující syntaxí:

<TD ALIGN="zarovnání" BACKGROUND="obrázek na pozadí" BGCOLOR="barva pozadí" BORDERCOLOR="barva rámečku" BORDERCOLORDARK="barva tmavší části rámečku" BORDERCOLORLIGHT="barva světlejší části rámečku" VALIGN="vertikální zarovnání" WIDTH="šířka buňky" HEIGHT="výška buňky" COLSPAN=n ROWSPAN=n>vlastní obsah buňky</TD>

Kromě parametru HEIGHT nám přibyly ještě dva další: COLSPAN určuje počet sloupců, přes které se buňka rozkládá - implicitní hodnota, která se nemusí zadávat, je 1. Stejnou funkci má i parametr ROWSPAN, jenom s tím rozdílem, že se zde jedná o počet řádků.

A nyní již praktická ukázka:

<TABLE BORDER=1> <TR><!--první řádka tabulky --> <TD> první buňka tabulky </TD> <TD> druhá buňka tabulky </TD> </TR><!--konec první řádky tabulky--> <TR><!--druhá řádka tabulky--> <TD> třetí buňka tabulky </TD> </TR><!--konec druhé řádky tabulky--> </TABLE>

A výsledek:

první buňka tabulky	druhá buňka tabulky
třetí buňka tabulky

A ještě k tomu, co jsem slíbil výše - totiž jak vytvořit tabulku s rámečkem 1 pixel, která nebude v prohlížeči stínovaná. Docílíme toho tak, že napřed vytvoříme tabulku, která bude mít barvu pozadí takovou, jakou chceme barvu rámečku. Do této tabulky potom vnoříme další tabulku, kde zadáme CELLSPACING=1 - dosáhneme tak odsazení vnořené tabulky od první tabulky 1 pixel a vytvoříme tím nestínovaný rámeček, který bude vypadat stejně ve všech prohlížečích. Samozřejmě můžeme i zde používat všechny parametry, které jsme si ukázali výše. A takhle to bude vypadat:

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 BGCOLOR="BLACK"> <TR> <TD>   <TABLE CELLSPACING=1 CELLPADDING=0 BORDER=0>   <TR BGCOLOR="WHITE">   <TD>   obsah první buňky   </TD>   </TR>   <TR BGCOLOR="AQUA">   <TD>   obsah druhé buňky   </TD>   </TR>   </TABLE> </TD> </TR> </TABLE>

A výsledek:

obsah první buňky obsah druhé buňky

A to je o tabulkách v HTML vše.