Design pomocí tabulek

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

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.

Nejjednodušší 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:

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:

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

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.

Složitější příklad

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:

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í.

Odbočka: Popisky obrázků

Nemyslím tím atribut alt, který se zobrazuje v bublině, když se obrázek přejíždí myší, ale prostý text, který je umístěn přesně nad nebo pod obrázkem. Zarovnat ten text přesně není sranda. Pokud máte takových obrázků s popisky na stránce víc, neobejdete se bez tabulek. (Proto o tom píšu zde.)

Celé je to samozřejmě docela jednoduché. Každý obrázek se umístí do jednobuněčné tabulky, jejíž buňka se zarovná na střed a pod obrázek se napíše text:

Pokud nezadáte width a height, celé se to i s tabulkou zobrazí až po té, co se fotka načte ze serveru. Když to zadáte, prohlížeč si na to vyhradí místo. Takže jednoznačně doporučuji zadávat (mnoho editorů to dělá automaticky).

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, který se tváří, že s vnořenými tabulkami pracuje 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ě tabulky.

Při tvorbě dynamických stránek (PHP, ASP - tomuto tématu jsem se dosud vyhýbal) 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ě.

Rychlost zobrazování

Prohlížeče zobrazí tabulku až po té, co dorazí na klienta celá. Neumí to vykreslovat po buňkách.

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 než asi dvě sekundy. Jestliže to chápete tak, že kvůli tomu vlastně nelze použít výše uvedené postupy, máte úplnou pravdu. Naštěstí existují některá částečná řešení a ani rychlost zobrazení není žádná modla, že by se jí muselo přizpůsobit úplně všechno.

Částečná řešení

Rozlišovat projekty

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

Rozměrovat obrázky

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).

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ý. Kamarád 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. Na druhou stranu tento postup neodporuje duchu HTML, jako to dělají tabulky.

Duch HTML

HTML původně vzniknul jako jazyk vymezující obsah, nikoliv formu. Takže je naprosto nesmyslné dělat sloupcovou sazbu tabulkou, protože to není tabulka, ale sloupcová sazba. Žel, tag pro sloupcovou sazbu v HTML není (je v rozšíření, ale není Explorerem podporován), takže se musí udělat tabulka. Z hlediska "ducha HTML" je to zvěrstvo.

Leč k velké lítosti mnohých je internet zvěrstev plný, je nacpaný deklaracemi, ve kterých účel světí prostředky. Asi se s tím nedá nic dělat. Jenom skromně navrhuji používat tabulky opravdu jen na tabulky.

Krásně to jednou v jednom mailu vystihl Sviňák (volně cituji): "Píšeš, že dnešní internet odporuje duchu HTML. Ale co když je to spíš tak, že HTML už nedostačuje potřebám dnešního webu?" Touto krásnou úvahou končím pojednání o tabulkových fíglech, které raději moc nepoužívám.

Obsah

Hledání

Základní kurs

Editory

HTML tipy

Provoz webu

CSS styly

PŘEHLED VLASTNOSTÍ CSS