a proč ho nepoužívat
Mnoho profesionálů v oblasti webdesignu si bez tabulek dříve neumělo představit návrh hezkých stránek. Protože se ale tabulkový design pomalu vykresluje v prohlížečích, ustupuje se od něj a stránky se designují pomocí CSS. Pominu-li nepříjemnost s pomalým vykreslováním, dá se s tabulkami rozumně kouzlit.
Historická řešení - Design jako rám - Složitější příklad - Další stará řešení pomocí tabulek - Rychlost zobrazování - Částečná řešení pomalého zobrazování - Sloupcová sazba - Vnořené tabulky - Problém maximální šířky + řešení tabulkou
Před tím, než se v prohlížečích masově ujaly CSS styly (tedy někdy kolem roku 2004), se některé věci daly dělat pouze tabulkami. Například:
Tohle všechno šlo do roku 2004 bezpečně udělat pouze tabulkami. Dnes se to dělá spíše pomocí CSS. Jestli se ale někdy budete setkávat se staršími kódy, je dobré vědět, proč a jak se to tabulkami dělalo. Zajímavé také je, že všechny tyto postupy dodnes v prohlížečích fungují.
Tohle je největší vykopávka. V roce 1997 to byla úžasná novinka.
Protože rámy (frames) -- technický výstřelek roku 1996 -- s sebou přinášejí řadu nevýhod, bývalo od roku 1997 vhodné místo rámů používat tabulku, která vypadala jakoby sestavená z rámů. Tabulka obsahuje dvě buňky, přičemž ta levá (s pevnou šířkou) obsahuje nějaké odkazy a ta pravá vlastní text stránky.
Hlavička stránky třeba s logem | |
Nějaké odkazy odkaz odkaz |
Hlavní text stránky, který je obvykle mnohem delší a širší než levý sloupec s odkazy. |
Zdroják takové tabulky si můžete vysochat ze zdrojáku této stránky.
Pozor, nefunguje to jako rámy! V rámech jsou v levém a v pravém rámu oddělené html soubory. Tady ne. Do tabulkové stránky se musí všechna menu i texty nakopírovat, všechno to musí být v jednom souboru. Způsoby, jak to kopírovat a udržovat, probírám na stránce jak udělat levé menu.
Částečně se to dá vyřešit pomocí iframe, který se roztáhne přec celou tu pravou buňku. Má to spoustu nevýhod, ale funguje.
Grafický efekt designu spočívá v použitém obrázkovém nebo barevném pozadí. Jsou dvě možnosti:
<td style="background: url('pozadi.gif') red">
.Ještě musím zmínit, že buňky takové "rámové" tabulky musejí mít nastaveno vertikální zarovnání (valign) nahoru (top).
Nejčastější pojetí tabulkové úpravy je toto:
Hlavička |
||
Levý sloupecObsahuje zpravidla hodně odkazů |
ObsahObsah stránky, vlastní text, který je důležitý.
|
Pravý sloupec |
Patička |
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.
Zda má patička přesahovat pod sloupce, se dá nastavit tím, že si pohrajete s hodnotami u rowspan a colspan.
Nejčastější způsob, jak text zúžit, bylo uzavřít text 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 text zobrazoval ve sloupečku uvedené šířky.
Běžně se používají šířky od 400 do 700 obrazovkových bodů (pixelů), což se dobře čte a vejde se to i na malé monitory.
Dnes se na zúžení obsahu používá tag <div>, kterému se pomocí CSS nastaví šířka vlastností width.
Jediný způsob, který šel dříve použít na vycentrování celé stránky na střed, byla tabulka s nastavenou šířkou a s atributem align="center". Tedy například:
<table width="600"
align="center">
<tr>
<td>
Celý text stránky ... bla bla bla
</td>
</tr>
</table>
Takhle to vypadá v praxi (přidán rámeček):
Celý text stránky ... bla bla bla |
Poněkud ukecané. Dnes se obvykle centrovaný blok dělá pomocí tagů <div>. Ve striktním módu stačí takovýto zápis:
<div style="width: 600px; margin-left: auto; margin-right: auto;">
Celý text stránky ... bla bla bla
</div>
Takhle to vypadá (s rámečkem):
Pro quirk mód a některé starší verze Internet Exploreru, které nechápou margin: auto je lepší kód trochu rozšířit o ještě jeden zanořený div:
<div style="text-align: center">
<div style="width: 600px; margin-left: auto; margin-right: auto; text-align:
left;">
Celý text stránky ... bla bla bla
</div>
</div>
Občas je potřeba na stránce vyrobit něco, co se podobá tabulátorům ve Wordu. Na to se celkem hodí tabulka s jedním řádkem a dvěma buňkami.
<table width="100%">
<tr>
<td align="left">
Text zarovnaný vlevo
</td>
<td align="right">
Text zarovnaný vpravo na tomtéž řádku
</td>
</tr>
</table>
Takhle to vypadá (přidány rámečky):
Text zarovnaný vlevo | Text zarovnaný vpravo na tomtéž řádku |
Totéž se dá udělat pomocí kaskádových stylů obtékáním, ale je to trochu složitější. Buďto se dvou divům nastaví šířka 50 % a float, nebo jenom jednomu. Pokud se ale nerozplavou oba texty, dost často nejsou řádky textu ve stejné výšce.
Před příchodem CSS se dalo obrázkové pozadí nastavovat pouze tabulkce nebo buňce tabulky (nebo celé stránce). Například:
<table>
<tr>
<td background="kyticka.gif">
Text s grafickým pozadím
</td>
</tr>
</table>
Když se do tabulky dalo obrázkových buněk víc, každá s jiným pozadím, tak to pak dohromady vyskládalo větší obrázek. Nebo se do těch buněk dávaly rovnou obrázky. Rozvržení do tabulek (bez okrajů) býval jediný způsob, jak různé obrázky srazit těsně k sobě, aby dohromady dávaly něco graficky úžasného.
Prohlížeče zobrazí tabulku až po té, co dorazí na klienta celá. Dělá to Internet Explorer. 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.
Z moderních prohlížečů toto problematické chování vykazuje již pouze Internet Explorer. Ten je ale na webu stále dominantní.
Proč to je tak pomalé: prohlížeč Internet Explorer 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 býval web třeba ještě v roce 2003 přeplněný. Tabulkový design je jeden z důvodů, proč se web zdá být tak pomalým. (Podrobnější informace o rychlosti zobrazování stránek.)
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 částečné řešení problému pomalého zobrazová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. Navíc tento postup neodporuje duchu HTML, jako to dělají tabulky.
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.
Královská disciplína webdesignu: postavit stránky primitivně jednoduché. Bez tabulek, bez pozicování, bez menu. Dělají to tak jenom opravdoví profíci, protože ostatní nevědí, že je to tak dobře, a za jednoduchost se stydí. Prostě se vykašlete na různá menu a uspořádání a vložte do stránky pouze to podstatné, zpravidla text a obrázky.
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. Ani v CSS není žádné automatizované řešení pro sloupcovou úpravu textu.
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é. Příznivci této technologie rádi pracují ve FrontPage 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ě.
Pokud měl uživatel menší rozlišení nebo malé okno, musel si s textem v širokém sloupci při čtení posunovat doprava doleva. Asi to znáte a dáte mi za pravdu, že to je na pěst. Dnes se to řeší běžně přes max-width, ale dříve existovalo řešení přes tabulky. Spočívalo v tom, že tabulce se šířka nezadá, ale buňce s textem ano:
<table border="1" cellpadding="6"
cellspacing="0">
<tr>
<td width="500"><span
style="font-size:x-large">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.
Tento postup se dlouho používal na Google nebo na Seznamu. Bylo to kvůli tomu, že CSS vlastnost max-width dlouho nebyla v Internet Exploreru podporována.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.