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 4.7 – „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 4.8 – „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.
