Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
Web
Jak na oživení tabulek v HTML
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:
|
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:
|
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ě:
|
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:
|
A výsledek v prohlížeči:
|
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.
Poslat článek
Nyní máte možnost poslat odkaz článku svým přátelům: