Design pomocí tabulek

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

Historická řešení

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

Design jako rám

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.

Všechno do jednoho souboru

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.

Nastavení pozadí

Grafický efekt designu 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é nejlépe tak, aby navazovaly) a spočívá v nastavení pozadí (css vlastnost background) buňkám (tag <td>):
    <td style="background: url('pozadi.gif') red">
    .
  2. Starší, 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. uzoučký široký obrázek, který bude pozadí

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:

Hlavička

Levý sloupec

Obsahuje zpravidla

hodně odkazů

Obsah

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

Další stará řešení pomocí tabulek

Zúžení obsahu stránky

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.

Vycentrování bloku s pevnou šířkou na střed okna

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

Celý text stránky ... bla bla bla

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>

Umisťování dvou krátkých textů na jeden řádek

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.

Grafické pozadí nějakého prvku

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.

Rychlost Pomalost zobrazování

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

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

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 částečné řešení problému pomalého zobrazování.

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

Zjednodušit návrh

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.

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>

Sazba do sloupců

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.

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é. 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ě.

Problém maximální šířky + řešení tabulkou

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"><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, ačkoli je osm let starý, se stále používá v nejmodernějších návrzích na Google nebo na Seznamu. Je to kvůli tomu, že CSS vlastnost max-width není v Internet Exploreru podporována.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.