Design pomocí tabulek

a proč ho nepoužívat

Mnoho profesionálů v oblasti webdesignu si bez tabulek neumí představit návrh hezkých stránek. Ale takové zkrášlení s sebou přináší jistou nefunkčnost, protože se to pomalu zobrazuje. Pominu-li tuto nepříjemnost, dá se s tabulkami rozumně kouzlit.

Zúžení obsahu - Problém šířky + vychytávka - Design jako rám  - Složitější příklad - Rychlost zobrazování - Částečná řešení pomalého zobrazování - Sloupcová sazba - Vnořené tabulky  

Zúžení obsahu

Mnoha čtenářům vadí, když jsou moc široké stránky. Špatně se to čte, protože se pletou řádky. Mimochodem právě to je důvod, proč se v novinách používá sloupcová sazba.

Nejčastější způsob, jak text zúžit, je uzavřít ho do tabulky, která má jen jedinou buňku. Tabulce se předepíše šířka (atributem width="šířka v pixelech" u <table> nebo <td>). Potom se bude text zobrazovat ve sloupečku uvedené šířky.

Běžně se používají šířky od 400 do 700 obrazovkových bodů (pixelů). Šířka nad 800 je hloupost, protože 800 je šířka nejčastěji používaného zobrazení.

Problém šířky + vychytávka

Pokud má uživatel menší rozlišení nebo malé okno, musí si s textem v široké tabulce při čtení posunovat doprava doleva. Asi to znáte a dáte mi za pravdu, že to je na pěst. Naštěstí existuje řešení. Spočívá v tom, že tabulce se šířka nezadá, ale buňce s textem ano:

<table border="1" cellpadding="6" cellspacing="0">

<tr>

<td width="500"><font size="6">Tento text ...</td>

</tr>

</table>

Tento příklad si můžete zobrazit v prohlížeči. Je v něm sloupeček textu, který má šířku 500 pixelů, pokud je v širším okně. Pokud by byl v okně užším než 500 pixelů, zúží se.

Pokud používáte nějaký wysiwyg editor, musíte si dávat bacha, aby vám nevložil šířku i do tagu <table>.

Design jako rám

Protože rámy (frames) s sebou přinášejí řadu nevýhod, je někdy vhodné místo nich používat tabulku, která vypadá jakoby sestavená z rámů. Myslím, že je to jasné: tabulka obsahuje dvě buňky, přičemž ta levá (s pevnou šířkou) obsahuje nějaké odkazy a ta pravá vlastní text stránky.

Hlavní efekt spočívá v použitém obrázkovém nebo barevném pozadí. Jsou dvě možnosti:

1. Jednodušší způsob používá dva obrázky (zvolené nelépe tak, aby navazovaly) a spočívá v nastavení pozadí buňkám: <td background="pozadi.gif">.
2. Starší, elegantnější a poněkud složitější způsob (který se dá využít i u beztabulkových designů) používá jako pozadí jediný uzoučký obrázek gif, který je velmi široký. V levé části má kresbu stejné šířky, jakou bude mít levá buňka tabulky. Ještě je také dobré nastavit opakování jenom v ose y. Můžete si zobrazit příklad, který opakuje i v ose x.

Ještě musím zmínit, že buňky takové "rámové" tabulky musejí mít nastaveno vertikální zarovnání (valign) nahoru (top).

Složitější příklad

Nejčastější pojetí tabulkové úpravy je toto:

Někdy stránka nemá pravý sloupec nebo patičku, časté variace se týkají rohů stránek.. Zjednodušeně vypadá v HTML tabulková úprava sloupců takto:

<table width="760"> <tr> <td colspan="3" > Hlavička </td></tr>

<tr><td rowspan="2" width="150">Levý sloupec</td>

<td width="500">Obsah</td>

<td rowspan="2" width="110">Pravý sloupec</td> </tr>

<tr> <td>Patička </td> </tr> </table>

Všimněte si zadaných šířek. Tabulka je široká 760 pixelů, což se každému vejde do okna i s rolovací lištou. Samozřejmě se tam musí dopsat spousta formátovacích parametrů; zejména se jedná o vertikální zarovnání a barvu pozadí. To se dá udělat pomocí html atributů i pomocí CSS.

Rychlost Pomalost zobrazování

Prohlížeče zobrazí tabulku až po té, co dorazí na klienta celá. Neumí to vykreslovat po buňkách. Pokud třeba celou stránku uzavřete do tabulky, čtenář kouká celou věčnost na prázdnou stránku.

Proč to tak je: prohlížeč se bojí, že v tabulce najde něco strašně širokého, kvůli čemuž by musel měnit šířku sloupců. Takže raději zobrazí tabulku až po té, co se ujistí, že našel nejširší objekty.

Z toho vyplývá, že si nelze dovolit zavírat do tabulek texty, které se načítají déle. 

Kvůli tomu vlastně nelze s úspěchem použít design-jako-rám pomocí tabulek. Takovými designy je dnešní web (doplněno 2003) přeplněný. Tabulkový design je jeden z důvodů, proč se web zdá být tak pomalým. 

Naštěstí existují některá řešení.

Řešení pomalého zobrazování

Rozlišovat projekty

Pokud stavíte pro nějakou firmu komerční prezentaci, tak tam ty tabulky klidně můžete použít, protože

1. na firemní stránky stejně nikdo nekouká
2. akorát majitel firmy, ale ten to má v cache paměti, takže se mu to zobrazuje rychle
3. firmy platí za krásu a ne za funkčnost, takže se bez tabulek asi neobejdete.

Rozměrovat obrázky

Jde pouze o částečné řešení. U obrázků v tabulkách je uvedení rozměrů naprostou nutností. Když se totiž rozměry neuvedou, musí prohlížeč načíst celý obrázek (což může trvat dlouho), zatímco se vůbec nic z té tabulky nezobrazuje, protože prohlížeč čeká, jak bude ten obrázek velký a jestli se mu tam vůbec vejde. Obzvlášť varuji před počitadly: ty se většinou stahují dlouho (protože se na serveru počítají) a nemají explicitně uvedenou šířku.

Použít více tabulek

Normálně ten text rozdělte do více tabulek. Ta první nechť je kratší, zobrazí se rychle a čtenář může číst, zatímco se stahuje ta druhá tabulka. Ale pozor! Velice špatně se takové stránky aktualizují. Lépe řečeno skoro to nejde. Toto řešení se tedy dá použít jen u stránek, které se dlouhodobě nebudou měnit, nebo u serverem generovaných stránek (CGI, PHP, ASP). Je to k vidění např. na serveru Lupa.cz. Je to pouze čátečné řešení problému pomalého zobrazování.

Obtékané tabulky

Moje oblíbené řešení pro částečnou sloupcovou sazbu. Na začátek stránky umístím tabulku obtékanou zleva (align="right") s nějakým textem, který logicky patří od bočního textu. Rychlost zobrazování je uspokojivá, protože obsah té tabulky je malý. MaKr mi navíc poradil, že když se takové tabulce nastaví velmi velká výška (height="10000" třeba), tak to vypadá, jako kdyby to byl jako rám.

CSS pozicování

Pozicovací vlastnosti kaskádových stylů umožňují umístit nějaký blok textu nebo prostě cokoliv na jakékoliv místo dokumentu. Dá se tak udělat i sloupcová úprava. Problém je snad jen v tom, že tyto vlatnosti jsou různými prohlížeči interpretovány různě, takže je to potřeba děsně dlouho ladit, přičemž stejně není nic zaručeno. (Doplněno 2003: většinové prohlížeče už to podporují velmi dobře.) Na druhou stranu tento postup neodporuje duchu HTML, jako to dělají tabulky.

CSS obtékání

Pětkové verze prohlížečů umějí správně vykreslovat css vlastnost float, takže se design dá postavit z divů, které se nechají obtékat.

Sloupcová úprava

Mnoho dnešních zpravodajských serverů má na stránce jedinou tabulku. Ta obsahuje v prostředním sloupci obsah, v levém odkazy a v pravém také odkazy.

<table><tr>
<td>Levý sloupec</td>
<td>Obsah stránky jakkoliv složitý</td>
<td>Pravý sloupec</td></tr>
</table>

Neexistuje žádný způsob, jak donutit prohlížeč, aby obsah z jedné buňky přeléval do jiné podle délky obsahu. Do buněk se to musí rozdělovat ručně. Je to na pěst.

Vnořené tabulky

Do buňky tabulky můžete vložit cokoliv, takže i třeba další tabulku. Sami určitě přijdete na to, kdy se to hodí, většinou je to potřeba u komplikovaných layoutů. Já osobně nemám zanořované tabulky moc rád, protože je to nepřehledné a pekelně to zatěžuje klienta. Příznivci této technologie rádi pracují ve FrontPagi nebo ve Wordu, kteréžto programy se tváří, že s vnořenými tabulkami pracují levou zadní, což je sice pravda, ale autor většinou neví, ve které tabulce zrovna co deklaruje. Začátečníci jsou navíc uchváceni takovou tužtičkou, která tabulky kreslí, ale přináší to jenom komplikace. Jednou jsem opravoval takové zvěrstvo z FrontPage, kde byl na jednom místě text uvnitř pěti vnořených tabulek. Není asi třeba zdůrazňovat, že je to lajdáctví. Neznám důvod, proč zanořovat více jak dvě tři tabulky.

Při tvorbě dynamických stránek (PHP, ASP) je někdy potřeba, aby se obsah nenačítal po řádcích, ale po sloupcích. Jediné rozumné řešení jsou právě vnořené tabulky, v tomto případě je to na místě.

Předchozí: Nové vlastnosti tabulek
Vizte též: obsah/forma, rámy, CSS pozicování, Jak udělat levé menu, Co ovlivňuje rychlost stránek, rolovací lišty tabulek, Vše o pozadí
Odkaz mimo: Jak zvolit šířku stránky (zdroj Sova v síti)