Diskuzí na toto téma bylo vedeno hodně. Většina se zabývá rozdílem mezi tabulkovým nebo beztabulkovým (css) layoutem. Trošku zde teď nastíním můj názor k tomuto problému a poté si ukážeme lehký příklad, jak udělat to, co se dá udělat také tabulkou. Nebudu zde vytvářet kompletní stánku. K tomu tento seriál není veden a navíc zde na Owebu už jeden takový je.

Co to vlastně CSS layout je?

CSS layout, občas nazývaný beztabulkový, nebo div layout, je rozvržení stránky, přičemž využíváme stylování blokového elementu div přes css. Já v tomto díle budu využívat název css layout, protože na toto označení jsem si zvykl a nechci zde v tom hlavně dělat "bordel", když budu používat více označení.

Proč css layout a ne tabulkový?

Otázka je jednoduchá a tím pádem odpověď je jednoduchá. Tabulky nebyly, nejsou a nebudou určeny na rozvržení stránky. Tabulky se mají používat pro formátování tabulkových údajů, jako jsou například různé statistiky, seznamy (nemyslím seznamy ul,li), ale například také pro formuláře. Další nevýhodou používání tabulek je jejich pomalejší načítání a trošku větší znepřehlednění kódu. Toto jsou fakta, která hovoří proti tabulkám, ale nic nikomu nezakazuje používání tabulek na layout stránky. Dokonce v některých případech je snazší používat tabulky, než css layout. Například když chceme vytvořit klasický třísloupcový layout. Nikdo neříká, že to nejde přes css layout, ale je to podstatně složitější. Spíše toto by nás mohlo vést k tomu, že by jsme se mohli začít snažit vytvářet stránky, které tento klasický, hranatý, třísloupcový layout mít nebudou a budou působit trošku více nepravidelně. To sebou ponese další výhody, lidé si je lépe zapamatují a nikdo Vám nebude často říkat, že jste ten styl někde okopírovali. I když vždy se někdo najde, kdo bude považovat, že to Vaše se zrovna podobá něčemu někde támhle z prdelákova za velkou louží a že jste se tím nechali inspirovat. Tímto bych ukončil polemizování o tom, co je lepší a co je horší a pustil bych se do práce.

Vytvoříme tabulkový layout

V této části vytvořím klasický tabulkový layout, který bude obsahovat hlavičku, pod ní banner, pod bannerem dva sloupce. V levém sloupci se bude nacházet menu, v pravém bude obsah. Pod tím vším bude patička, která to vše zakončí. Tabulku nastyluji pomocí css, abychom se procvičovali v definování stylů i na tabulkách, protože i ty se dají pomocí css stylovat. Nakonec do obsahu přidám pár odkazů na stránky vytvořené pomocí tabulek.
Ukázka kódu stránky pomocí tabulky

<table>

<tr>

<td  id="head" colspan="2">Hlavička stránky , v css stylováno pod id=head</td>

</tr>

<tr>

<td  id="banner" colspan="2">Místo pro banner stránky, v css stylováno pod id=banner</td>

</tr>

<tr><td id="menu">menu id=menu</td>

<td>obsah id=obsah<br>

<h4>příklady tabulkových klasických stránek</h4>

<a href="http://www.aurumroom.cz/">http://www.aurumroom.cz/</a><br>

<a href="http://kfilmu.net/">http://kfilmu.net/</a><br>

<a href="http://www.novavip.cz/">http://www.novavip.cz/</a><br>

<a href="http://www.trefik.cz/">http://www.trefik.cz/</a><br></td></tr>

<tr><td id="end" colspan="2">Tak a tady je konec, tzv. patička id=end</td></tr>

</table>

Ukázka definice css stylu pro tabulku
table { width: 760px; margin: 0 auto 0 auto; border: 1px solid black; border-collapse: collapse;} #head { height: 20px; border-bottom: 1px solid black;} #banner { height: 100px; border-bottom: 1px solid black;} #menu { height: 100px; width: 20%; border-right: 1px solid black;} #obsah { } #end { height: 20px; border-top: 1px solid black;}
A výsledek je zde: PŘÍKLAD1-CSS

Kód okomentuji až v další části, protože to je velice podobné.

Tak a teď hurá na css layout

V této části si ukážeme úplně to samé, co jsme vytvořili v příkladu 1 pomocí tabulek, pomocí css layoutu. Názvy id zachovám stejné.

Nejprve začneme kódem na stránce.
<div id="hlavni"> <div id="head">Hlavička stránky , v css stylováno pod id=head</div> <div id="banner">Místo pro banner stránky, v css stylováno pod id=banner</div> <div id="menu">menu id=menu</div> <div id="obsah">obsah id=obsah<br> <h4>příklady tabulkových klasických stránek</h4> <a href="http://www.aurumroom.cz/">http://www.aurumroom.cz/</a><br> <a href="http://kfilmu.net/">http://kfilmu.net/</a><br> <a href="http://www.novavip.cz/">http://www.novavip.cz/</a><br> <a href="http://www.trefik.cz/">http://www.trefik.cz/</a><br></div> <div id="end">Tak a tady je konec, tzv. patička id=end</div> </div>
Kód začíná definicí divu "hlavni". Tento nám vymezuje celou oblast stránky s údaji. Podobá se elementu "table", při tvorbě tabulkového layoutu. Element div, jak již víme, je párový element, a tudíž musí být uzavřen. Tento div uzavřeme až úplně na konci stránky, protože nám styluje (definuje) celou stránku.
Dále máme div "head", pro vymezení hlavičky.
Pod ním máme div "banner" pro vymezení prostoru pro banner.
Teď nám přichází obsahová část a to nejprve div "menu" a poté div "obsah".
Pod těmito divy nám celou stránku končí patička, čili div "end" a nakonec ukončovací element divu "hlavni".

Teď se názorně podíváme jak vypadá definice v css.
#hlavni { width: 760px; margin: 0 auto 0 auto; border: 1px solid black;} #head { height: 20px; border-bottom: 1px solid black;} #banner { height: 100px; border-bottom: 1px solid black;} #menu { width: 20%; float: left;} #obsah { width: 79%; float: right; border-left: 1px solid black;} #end { height: 20px; border-top: 1px solid black; clear: both;}
div "hlavni"
Tento div má nejprve nadefinovanou svoji šířku (width: 760px), poté je vystředěn doprostřed stránky deklaraci okrajů (margin: 0 auto 0 auto). Poté má nadefinovaný rámeček kolem tohoto divu, čili kolem celé stránky (border: 1px solid black)

div "head"
Div "head" má nejprve nadefinovánu výšku (height: 20px) a spodní okraj (border-bottom: 1px solid black). Nic více zatím k němu nepotřebujeme.

div "banner"
Div "banner" je nadefinován podobně jako div "head".

div "menu"
Teď přijde ta obtížnější část. Šířka tohoto divu nastavená na 20% je jasná (width: 20%). Ale musíme nějak zajistit, aby nám tento div zůstal, tam kde má, a to vlevo od divu "obsah". To zajistíme deklarací obtékání (float: left).

div "obsah"
Podobně tak uděláme div "obsah". Nejprve nadefinujeme šířku (width: 79%). Zde mohou nastat problémy, protože kdybych v našem případě nechal šířku 80%, tak se nám tento div vykreslí pod divem "menu" a to my nechceme. Zajistit by jsme to také mohly nadefinováním automatické šířky divu "menu". Dále nastavíme obtékání (float: right). Pozor kdybychom tam toto obtékání neměli na definováno, tak se nám tento div sice vykreslí vedle divu "menu", ale jak by skončil div "menu", tak by se pod něj zasunul pokračující div "obsah". IE nám to vykreslí správně i když tam tato vlastnost není, ale Mozilla, Firefox i Opera to bude vykreslovat špatně (nebo možná pro někoho dobře). Ukončíme deklarací levého rámečku (border-left: 1px solid black).

div "end"
Tento div má jednu zvláštní vlastnost, a to je ta, že ukončuje obtékání na stránce. V divu "menu" jsme obtékáním začali a divem "obsah" jsme ho chtěli skončit, a ejhle, ono se to nepovedlo. A tak to napravíme když ho ukončíme zde (clear: both). Tato vlastnost ukončí obtékání na stránce. Kdyby jsme ji tam neměli, tak se patička nezobrazí tam, kde má, ale byla by někde pod divem "banner" posunutá kousek doprava.

A teď jak nám to vůbec bude vypadat: PŘÍKLAD2-CSS

Teď si můžeme srovnat složitost obou případů a zjistíme, že když budeme mít rozsáhlé stránky, tak použitím divů je značně zpřehledníme (myslím kód) a určitě urychlíme načítání. Ovšem použití CSS layoutu vyžaduje dobrou znalost css a mnohdy je lepší pro úplné začátečníky, kteří neví o css ani hlavu ani patu, použít ten "nevhodný" tabulkový layout. Tak je za to "nepaskujme" urážkama a slušně jim poraďme.

Autor: in-spyder

Facebook Twitter Topčlánky.cz Linkuj.cz

Sdílet