Mnoho stránek na Internetu má grafickou úpravu podobnou jako na obrázku 25 – „I tato stránka je dílem tabulek“. Na první pohled by se mohlo zdát, že výsledný efekt – navigační odkazy v levé části a informace v pravé – je dosažen použitím rámů (viz strana ???. Ve skutečnosti tomu tak není. Optické rozdělení stránky na dvě části bylo dosaženo použitím vhodného obrázku na pozadí. Jednalo se o úzký proužek, který byl v levé části červený a v pravé bílý (viz obr. 24 – „Obrázek je jen úzký proužek“). Tento podklad se opakuje pod sebou podle potřeby, takže vyplní tolik místa, kolik je potřeba.
Abychom mohli obsah stránky umístit přesně nad červenou
a bílou část stránky, použili jsme tabulku. Celá stránka je
vlastně tvořena jednou tabulkou, která má dva sloupce. U obou
sloupců je šířka pomocí atributu width nastavena tak, aby jejich obsah
vyšel nad červenou resp. bílou část stránky. Naší ukázkové stránce
tedy odpovídá následující zápis v HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ukázka použití vhodně zvoleného pozadí</title>
</head>
<body background="zadek.gif">
<table width="780">
<tr>
<!-- PRVNÍ SLOUPEC - NA ČERVENÉM -->
<td valign="top" width="200">
<div align="center">
<img src="logo.gif" alt="Logo firmy Elektromix">
<p><a href="nabidka.html">Nabídka produktů</a></p>
<p><a href="cenik.html">Ceník</a></p>
<p><a href="kontakt.html">Kontakt</a></p>
<p><a href="objednat.html">Objednávky</a></p>
<p><a href="zamestnanci.html">Seznam zaměstnanců</a></p>
</div>
</td>
<!-- DRUHÝ SLOUPEC - NA BÍLÉM -->
<td valign="top" width="580">
<h1>Elektromix s.r.o.</h1>
<p>Vítejte na WWW-serveru nejlepší osvětlovací firmy na světě...</p>
<p>Právě je k dispozici <a href="test.html">nezávislý test
halogenových žárovek</a>.</p>
</td>
</tr>
</table>
</body>
</html>
Jak jste jistě vytušili, obrázek s proužkem, který vytváří
pozadí, je uložen v souboru zadek.gif. První
sloupeček naší tabulky má šířku 200 pixelů a druhý 580.
Z toho nám logicky vyjde, že šířka obrázku pro podklad by měla
být 780 pixelů. V praxi je však potřeba proužek udělat širší (alespoň
1024 bodů), protože tabulka je vždy posunuta kousek vpravo od levého
okraje a šířka celé stránky pak zabere více než 780 pixelů.
Krátký proužek podkladu by mohl způsobit, že se podklad bude opakovat
i vedle sebe a na pravém okraji stránky se objeví úzký
svislý červený pruh. Náš obrázek je široký více než 1000 pixelů, takže
ještě do rozlišení 1024×768 je vše v pořádku. U vyšších
rozlišení by se červený proužek znovu opakoval.
Poznámka
Ty z vás, kteří znají rámy, možná napadne, proč požadovaného efektu dosahovat takto složitě – stačí přece použít rámy. Důvody pro zde popsané řešení jsou dva. Za prvé rámy znemožňují vytváření odkazů na různé kombinace stránek v rámech. Druhým důvodem může být, že při troše práce a kouzlení s buňkami tabulky lze dosáhnout toho, že nějaký obrázek přesahuje do obou částí stránky (červené i bílé). Vypadá to mnohdy velmi efektně a při použití rámů si o takovém výsledku můžeme nechat jen zdát.
