Jak na oživení tabulek v HTML - Builder.cz - Informacni server o programovani

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

19. ledna 2001, 00.00 | V minulém článku jsme si ukázali, jak se tvoří tabulky v HTML. Dnes se podíváme na to, jak je možné je trochu oživit.

V minulém článku jsme si ukázali, jak se tvoří tabulky v HTML. Dnes se podíváme na to, jak je možné je trochu oživit (některé příklady fungují pouze v IE).

Jak na zakulacení buňek?

Prvním a nejběžnějším způsobem zpestření na první pohled nudných tabulek je zakulacení jejich rohů. Pro tyto účely si musíme vytvořit čtyři obrázky (pro každý roh tabulky). Ty musíme poté umístit do samostatných buňek. K tomuto účelu se příliš nehodí parametr BACKGROUND, který určuje obrázek na pozadí tabulky - ten totiž náš obrázek deformuje podle rozměrů okolních buňek (jedinou možností je vytvoření speciálních obrázků pro každou tabulku, ale pokud máte takových tabulek na stránce více, tak to velmi zpomaluje načítání stránky). Musíme tedy použít nepárový tag IMG, který vkládá do stránky obrázek - v tomto případě je velikost buňky přizpůsobována velikosti obrázku. V praxi to bude vypadat takhle:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN="CENTER" WIDTH="100%">   <TR>     <TD><IMG SRC="lhr.gif" alt="" BORDER=0 WIDTH=21 HEIGHT=21></TD>     <TD BGCOLOR="BLACK" WIDTH="100%"><FONT COLOR="WHITE">Obsah první buňky</FONT></TD>     <TD><IMG SRC="phr.gif" alt="" BORDER=0 WIDTH=21 HEIGHT=21></TD>   </TR>   <TR>     <TD><IMG SRC="ldr.gif" alt="" BORDER=0 WIDTH=21 HEIGHT=21></TD>     <TD BGCOLOR="BLACK" WIDTH="100%"><FONT COLOR="WHITE">Obsah druhé buňky</FONT></TD>     <TD><IMG SRC="pdr.gif" alt="" BORDER=0 WIDTH=21 HEIGHT=21></TD>   </TR> </TABLE>

A výsledek v prohlížeči:

	Obsah první buňky
	Obsah druhé buňky

Všimněte si, že jako obrázky jsou použity průhledné GIFy, a že pozadí tabulky je definováno jen v buňkách s obsahem, ostatní buňky jsou průhledné. Musíme zde také dávat pozor, aby velikost písma nebyla větší než výška obrázku, protože by obrázek "nepasoval".

Jistě jste také zaregistrovali, že u prostředních buněk jednotlivých řádku je parametr WIDTH="100%" - to proto, aby krajní buňky s naším obrázkem měli jen šířku rovnající se šířce obrázku a prostřední buňka zabírala veškeré ostatní místo. Pro názornost ještě ten samý příklad s parametrem CELLSPACING=1, aby bylo vidět rozložení jednotlivých buněk:

	Obsah první buňky
	Obsah druhé buňky

Využití dynamického HTML v tabulkách

Použitím dynamického HTML (DHTML) v tabulkách můžeme návštěvníky našich stránek okouzlit, stejně tak ale můžeme použitím nevhodných efektů svojí stránku "pohřbít". Celé DHTML, stejně jako Kaskádové styly (CSS), je bohužel velmi málo podporováno Netscape Navigatorem, a efekty, které si zde ukážeme, nebudou výjimkou.

Nejprve si ukážeme, jak změnit barvu textu v tabulce při přejetí kurzorem myši. Budeme také chtít, aby při pohybu kurzorem pryč z tabulky se text opět obarvil na bílo:

<TABLE BORDER=1 CELLPADDING=3 CELLSPACING=0 ALIGN="CENTER" WIDTH="100%" onMouseOver="this.style.color='blue';" onMouseOut="this.style.color='black';">   <TR>     <TD ALIGN="CENTER">Obsah tabulky</TD>   </TR> </TABLE>

A výsledek v prohlížeči:

Obsah buňky

Využíváme zde událostí onMouseOver a onMouseOut, pomocí this se odkazujeme na aktuální element (v tomto případě TABLE), pomocí style přistupujeme ke stylům a konečně pomocí color ovládáme barvu textu.

Takto můžeme přistupovat ještě například k pozadí tabulky (pomocí backgroundColor). Stejně tak můžeme měnit i události, při kterých se mají efekty spouštět (například onClick a onMouseUp, onMouseDown..).

Jak ale zajistit, aby se při přejetí kurzorem jedné buňky změnila barva pozadí druhé buňky? Musíme si jen druhou buňku pojmenovat pomocí parametru ID, vše si ukážeme na dalším příkladě:

<TABLE BORDER=1 CELLPADDING=3 CELLSPACING=0 ALIGN="CENTER" WIDTH="100%">   <TR>     <TD ALIGN="CENTER" onMouseOver="bunka2.style.backgroundColor='gray';" onMouseOut="bunka2.style.backgroundColor='white';">Obsah první buňky</TD>   </TR>   <TR>     <TD ALIGN="CENTER" ID="bunka2">Obsah druhé buňky</TD>   </TR> </TABLE>

A výsledek v prohlížeči:

Obsah první buňky

Obsah druhé buňky

Závěrem si ještě ukážeme, jak změnit barvu rámečku kolem tabulky - vytvoříme si napřed tabulku, kterou jsme si ukázali v minulém článku, do které vnoříme další tabulku, čímž nám vznikne tenký rámeček:

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 BGCOLOR="BLACK" ID="ramecek" ALIGN="CENTER" WIDTH="100%">   <TR>     <TD>     <TABLE CELLSPACING=1 CELLPADDING=0 BORDER=0 WIDTH="100%" onMouseOver="ramecek.style.backgroundColor='red';" onMouseOut="ramecek.style.backgroundColor='black';">         <TR BGCOLOR="WHITE">           <TD ALIGN="CENTER">obsah první buňky</TD>         </TR>         <TR BGCOLOR="WHITE">           <TD ALIGN="CENTER">obsah druhé buňky</TD>         </TR>     </TABLE>     </TD>   </TR> </TABLE>

A výsledek v prohlížeči:

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

A toto je pro dnešek vše. Doufám, že Vám tento článek alespoň stručně nastínil možnosti oživení tabulek na webových stránkách a bude Vám inspirací při tvorbě Vašich vlastních stránek.