Pokud chceme vytvořit stránku, která má speciální požadavky na rozmístění jednotlivých grafických prvků, mohou nám v tom pomoci tabulky. Dejme tomu, že chceme vytvořit webovou stránku fiktivní firmy. Vzhled stránky, kterou chceme vytvořit, si můžeme prohlédnout na obrázku 26 – „Stránka s náročným layoutem“.
Na stránce jsou nejzajímavější oblé rohy rámečků, ve kterých je umístěno navigační menu a samotný text stránky. Kdybychom se bez oblých rámečků obešli, je vytvoření stránky s použitím tabulek velice snadné. Pokud však chceme mít rohy oblé, musíme je vytvořit jako obrázky, které právě pomocí tabulky usadíme na správné místo stránky. Přitom se vždy musíme snažit, aby použitých obrázků bylo co nejméně a měly co nejmenší velikost – jen tak se bude stránka rychle přenášet a zobrazovat.
Pro dosažení potřebnéoh efektu stačí vytvořit malé obrázky, které obsahují malé kruhové výseče v potřebné barvě.
 |
Malé obrázky umístíme do tabulky, ve které nastavíme barvu pozadí jednotlivých buněk tak, abychom společně s obrázky dosáhli požadovaný efekt. Obrázek 27 – „Rozdělení obsahu stránky do buněk tabulky“ ukazuje, jak je tabulka rozdělená do řádků a sloupců; šipky znázorňují buňky, ve kterých je použit obrázek.
Pokud si v nějakém grafickém editoru vytvoříme malé růžky, je již vytvoření stránky poměrně snadné.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Super str�nka</title>
</head>
<body bgcolor="white">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="11" height="11">
<img src="lto.png" alt="/" height="11" width="11"></td>
<td colspan="4" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
<td width="11" height="11">
<img src="rto.png" alt="\" height="11" width="11"></td>
</tr>
<tr>
<td colspan="3" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
<td align="center" valign="top" bgcolor="#1c09ef" height="35">
<img src="super-stranka.png" alt="SUPER STR�NKA" height="25"
width="263">
</td>
<td colspan="2" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
<td width="10" height="10">
<img src="lti.png" alt="/" height="10" width="10"></td>
<td bgcolor="white"><img src="null.gif" alt=""></td>
<td width="10" height="10">
<img src="rti.png" alt="\" height="10" width="10"></td>
<td bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
</tr>
<tr>
<td bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
<td align="center" bgcolor="#1c09ef" width="200">
<font color="white"
face="Verdana, Arial CE, Arial, Helvetica CE, Helvetica, sans-serif">
O FIRM�<br><br>
PRODUKTY<br><br>
CEN�K<br><br>
KONTAKT<br><br>
<br><br><br><br><br><br>
<small>© 2001 Firma, s.r.o.</small>
</font>
</td>
<td bgcolor="white"><img src="null.gif" alt=""></td>
<td width="400">
<h1 align="center">Uk�zkov� text</h1>
<p align="justify">Zat�m jsme tabulky pou��vali k zobrazen�
dat, kter� logicky do tabulky pat��. Tabulky n�m v�ak poskytnou
v�bornou slu�bu i v jin�ch p��padech. Rozm�st�n�m
r�zn�ch grafick�ch prvk� do tabulky m��eme vytvo�it zaj�mav�
efekty. Tato oblast pou�it� se t�ko vysv�tluje n�jak p��li�
teoreticky. Uk�eme si tedy n�kolik praktick�ch
p��klad�. V�en�mu �ten��i mohou b�t n�vodem a inspirac�
p�i vytv��en� vlastn�ch grafick�ch kreac�.</p>
<p align="justify">P�edt�m, ne� n�kter� z n�sleduj�c�ch
�e�en� pou�ijeme, bychom si m�li rozmyslet, zda je to nezbytn�
nutn�. Na�e str�nky sice mohou nab�t na atraktivnosti pro
�ten��e, na druhou stranu poru�ujeme z�kladn� my�lenku
HTML — vyzna�ov�n� textu podle jeho v�znamu
a ne podle po�adovan�ho grafick�ho vzhledu.</p>
</td>
<td bgcolor="white"><img src="null.gif" alt=""></td>
<td bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
<td width="10" height="10">
<img src="lbi.png" alt="\" height="10" width="10"></td>
<td bgcolor="white"><img src="null.gif" alt=""></td>
<td width="10" height="10">
<img src="rbi.png" alt="/" height="10" width="10"></td>
<td bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
</tr>
<tr>
<td width="11" height="11">
<img src="lbo.png" alt="\" height="11" width="11"></td>
<td colspan="4" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
<td width="11" height="11">
<img src="rbo.png" alt="/" height="11" width="11"></td>
</tr>
</tbody>
</table>
</body>
</html>
Nesmíme zapomenout na několik důležitých věcí. Jednak měnit
barvu pozadá buněk tak, abychom dostali souvislou modrou plochu. K
dosažení tohoto efektu musíme nastavit atributy cellspacing, cellpadding a border u tabulky na nulu. Do buněk, které
jsou prázdné, pouze vytvářejí modrou nebo bílou plochu musíme něco
umístit, jinak by se v některých prohlížečích nezobrazila barva pozadí
(viz ???). Nedělitelná mezera může být někdy
moc velká a proto se v těchto případech obvykle vkládá obrázek, který
má velikost 1×1 pixel. Buňka tabulky pak už není prázdná a
vybarví se pozadím. Pokud použijeme obrázek, který je průhledný
(transparentní), můžeme jej použít v buňkách s libovolnou barvou
pozadí (voz obrázek null.gif).
Pokud sami začnete vytvářet stránky, které obsahují složité tabulky, musíte být zvláště opatrní. Při zobrazování tabulek se prohlížeče chovají drobně odlišně – je dobré stránku vyzkoušet v co nejširším spektru prohlížečů. Rovněž je dobré podívat se na to, jak stránka vypadá v nějakém textovém prohlížeči. V našem případě je výsledek v textovém prohlížeči skvělý (obrázek ???), ale mnoho dnešních stránek v textových prohlížečích dopadne otřesně.
Poznámka
Z poslední ukázky si můžeme odnést zajímavý poznatek. Všechny prohlížeče jsou naprogramovány tak, aby neznámé tagy a atributy ignorovaly. Proto nám také Lynx stránku zobrazil tak, jako by tam žádná tabulka nebyla.
