Táblázatos oldalfelépítés vs. táblázat nélküli oldalfelépítés

Ebből a fejezetből megtanuljuk az oldalfelépítés kialakítását stíluslapokkal, és hogy miért nem szabad erre a célra inkább táblázatokat használni.

Az 1996 előtti HTML változatokhoz nem lehetett stíluslapokat használni, hiszen még nem voltak stíluslapok. 1996-ban jelent meg a CSS 1, de még 3 év kellett, mire annyira elterjedt, hogy biztonságosan lehessen használni.

Amíg a stíluslapok nem álltak rendelkezésre, addig az oldalfelépítést táblázatokkal oldották meg a honlapkészítők, valahogy így:

Táblázatos oldalfelépítés - ne használjuk!

Hogy miért nem szabad táblázatokat használni erre a célra, az most következik.

1. Nem szemantikus. A táblázatokat arra kell használni, amire kitalálták őket: adattáblák létrehozására. Az oldalfelépítésre használt táblázat nem adattábla.
2. A HTML kód mérete nagyobb lesz, mintha CSS-sel oldanánk meg az oldalfelépítést. A rengeteg td és tr elem bizony nagyon meg tudja növelni a kódot egy nagyobb, bonyolultabb oldal esetében. A HTML kódot a böngészőnek minden alkalommal le kell töltenie, a stíluslapokat azonban gyorsítótárazza. Ez azt jelenti, hogy egy stíluslapot csak egyszer kell letöltenie, és azt utána akármennyi HTML oldalra tudja használni.
3. A stíluslap újrafelhasználható, a táblázatos oldalfelépítés nem. CSS-ben írhatunk egy olyan felépítést, ami háromoszlopos, fejléccel és lábléccel rendelkező kialakítást tesz lehetővé. Utána ezt a stíluslapot alkalmazhatjuk az összes HTML oldalunkra, és a böngésző gyorsítótárazza a stíluslapot. Táblázatokat használva ugyanakkor minden új weboldalon újra fel kell építenünk a kinézetet.
4. Az egymásba ágyazott táblázatok egy idő után nagyon bonyolulttá válnak. Bizonyos elrendezéseket csak többszörösen egymásba ágyazott táblázatokkal tudunk elérni. Ez nehezen olvashatóvá és karbantarthatóvá teszi a kódot, és ismételten feleslegesen megnöveli a HTML fájl méretét. Ráadásul néha használnunk kell helykitöltő, átlátszó GIF képeket, hogy az üres cellákat megfelelő méretűvé alakíthassuk.
5. A táblázatos oldalfelépítés korlátokat emel a weboldal akadálymentesítése elé. A képernyőfelolvasónak például celláról cellára kell ugrálnia, amíg végre igazi tartalomhoz juthat.
6. A táblázat nélküli oldalfelépítéssel készült weboldal jobb keresőeredményeket produkálhat.

A megoldás: használjunk div elemeket, ezeket akár egymásba is ágyazhatjuk, és stíluslappal pozícionáljuk őket.

Egyoszlopos elrendezés kialakítása

A probléma: Egyetlen oszlopból álló weboldalt kívánunk létrehozni, amit még középre is igazítunk.

Először azt mutatom be, hogy a body elemnek is van margója, belső margója, és keretet is lehet neki adni.

A body elem margója.

Ebben a példában csak egy div elemet hoztunk létre, és a biztonság kedvéért a margóját és belső margóját is 0-ra állítottuk, de mégis megjelent mellette margó. Ez a kis hézag nem más, mint a body elem margója.

A body elem margójának eltüntetése.

A body elemre 0 külső és belső margót állítottunk be, így eltűnt a div elem melletti hézag. Azért kell a margin és a padding értékét is 0-ra állítani, mert valamelyik böngésző padding-ot, míg mások margin-t adnak a body-nak alapértelmezettként.

Visszatérve az egyoszlopos elrendezéshez és középre igazításhoz, szükségünk lesz egy fő div elemre, amiben a weboldal egész tartalma fog helyet kapni. A HTML kódban tehát csak egy div elemet helyezünk el, a content egyedi azonosítóval.

Ennek a div elemnek a középre rendezéséhez három dolog szükséges:

1. Elöször adjunk meg egy szélességet a div elemre! Ez legyen 750 pixel. Azért pont ennyi, mert ekkor 800×600-as felbontásban nézve sem jelenik meg vízszintes görgetősáv a böngészőben. A vízszintes görgetősávot jobb elkerülni!
2. Állítsuk a bal és a jobb oldali margót egyaránt auto értékre! Ez a szabvány szerint azt kell, hogy eredményezze, hogy az elem középre igazítva jelenik meg. Ehhez mindenképpen szükséges, hogy előtte megadjuk a szélességet.
3. Állítsuk be a body elemre a text-align: center meghatározást! Ez azért kell, mert néhány régi böngészőnek (IE 5.x, nagyon kevesen használják) nem elég a margókat állítani, még ez is szükséges a középre igazításhoz. Aztán a fő div elemben balra visszaigazítjuk a szöveget, mert különben öröklődne a középre igazított szöveg a body elemtől.

Még egy kis színt és keretet is megadunk, és így fog kinézni művünk:

Középre igazított, egyoszlopos oldalfelépítés.

Kétoszlopos oldalfelépítés

A probléma: Az előző, egyoszlopos oldalt kétoszlopossá akarjuk tenni, és fejlécet, láblécet is akarunk használni.

Ehhez szükségünk lesz tovább 4 div elemre a content nevű div elemen belül. A bal oldali div elemre beállítjuk a float: left meghatározást, így az balra fog kiúszni. A bal oldali oszlopra szélességet is meg kell adnunk, különben nem működik megfelelően a float tulajdonság! Ezzel még nem vagyunk készen, mert a jobb oldali oszlopnak ugyanakkora bal margót kell adni, mint amennyi a bal oldali oszlop szélessége. Ha ezt elmulasztjuk, akkor a jobb oldali oszlop körbefolyná a bal oldali oszlopot, de nekünk nem ez a célunk most. A középre igazítás a már megismert módon történik.

Kétoszlopos, fix szélességű oldalfelépítés.

Két dologgal tehetjük jobbá ezt az elrendezést. Az egyik, hogy belső margót állítunk be az oszlopokra, és tetszés szerint a fejlécre és a láblécre is. Ekkor viszont a jobb oldali oszlop bal oldali margóját annyi pixellel kell megnövelni, amennyi a belső margók értéke összeadva a két oszlop között.

A másik, hogy szeretnénk elérni, ha a bal oldali oszlop azonos magasságú lenne a jobb oldalival. Ezt úgy szimuláljuk, hogy az egész oldalt tartalmazó content egyedi azonosítójú div elemnek ugyanolyan színű hátteret állítunk be, mint ami a bal oldali oszlop háttere.

Kétoszlopos, fix szélességű oldalfelépítés, belső margóval és azonos magasságú oszlopokkal.

Ha margókat, szegélyeket is szeretnénk hasznánli ehhez az elrendezéshez, akkor a legegyszerűbb, ha minden div elembe egy újabb div elemet ágyazunk, és ezekre a beágyazott div elemekre alkalmazzuk a margót és a szegélyt.

Kétoszlopos, fix szélességű oldalfelépítés, margóval és kerettel.

Az eddigi elrendezéseink mind fix szélességűek voltak, méghozzá pontosan 750 pixel szélességűek. Ha teljes szélességűt akarunk, ami mindig olyan széles, amekkora a böngészőablak, akkor a következőket kell tenni. A bal oldali oszlopra beállítunk egy float: left és width: 33% tulajdonságot. A jobb oldali oszlopra pedig 33%-os bal oldali margót állítunk be, így a jobb oldali oszlop elfoglalja a maradék szélességet.

Kétoszlopos, teljes szélességű oldalfelépítés.

Háromoszlopos oldalfelépítés

Kezdjük a fix szélességűvel! A teljes oldal most is legyen 750 pixel széles, ezt osztjuk fel három, 250 pixel széles div elemre. Miután beállítottuk a három oszlop szélességét, alkalmazhatjuk rájuk a float: left meghatározást, így létrejön a három oszlopunk. A láblécre még alkalmazni kell a clear: both meghatározást, hogy alulra kerüljön.

Háromoszlopos, fix szélességű oldalfelépítés.

Ugyanilyen háromoszlopos elrendezést hozhatunk létre akkor is, ha teljes szélességűt akarunk. Ekkor meg kell változtatnunk a HTML forrásban a div elemek sorrendjét: első a bal oldali oszlop, második a jobb oldali oszlop, és harmadik a középső oszlop. A két szélső oszlopot balra, illetve jobbra úsztatjuk (float), és a középső oszlopra (ami a forráskódban sorrendben a harmadik) beállítunk bal és jobb oldali margót. Ha a bal és a jobb oldali oszlop 33% szélességű, akkor a középső oszlopra 33% bal és jobb oldali margót kell beállítanunk.

Háromoszlopos, teljes szélességű oldalfelépítés.

Az eddig példákból észrevehető, hogy az oszlopaink nem azonos magasságúak. Ez azért van így, mert a div elemeknek csak addig tart a hátterük, ameddig tartalom van bennük. A két oszlopos elrendezésnél könnyű volt a dolgunk, mert a két oszlopot tartalmazó div elem hátterét olyan színűre állítottuk, amilyen színű a rövidebb oszlop háttere volt, így azt a hatást értük el, mintha azonos magasságúak lennének az oszlopok.

Háromoszlopos, fix szélességű elrendezésnél egy könnyed cselt vethetünk be. Ha például 3×250 pixel szélességű a három oszlopunk, akkor egy olyan háttérképet kell készítenünk, ami 750 pixel széles, és csak néhány pixel magas. Ez a kép csak három színből áll, pont azokból a színekből, amilyen hátteret akarunk adni a három oszlopnak. Ezután ezt a képet beállítjuk háttérnek a fő div elemre, így azt a hatást szimuláljuk, mintha az oszlopok azonos magasságúak lennének. (Ezt a trükköt először az A List Apart oldalon találták ki, és angolul „faux columns” a technika neve.)

Tehát elkészítünk egy 750 pixel szélességű képet:

Ezt beállítjuk a három oszlopot tartalmazó div elem háttérképének, és azt is megadjuk, hogy csak függőlegesen ismétlődjön. Az eredmény:

Háromoszlopos, fix szélességű, azonos magasságú oldalfelépítés.

Sajnos háttérképet nem tudunk alkalmazni teljes szélességű oszlopoknál, mert azokhoz felbontástól függően más és más szélességű képet kellenek alkalmazni.

A problémára Alex Robinson talált egy jó megoldást, amit a One true layout nevű angol cikkben publikált. Az általa készített elrendezés több problémára is megoldást nyújt.

Háromoszlopos oldalfelépítésünknek könnyen adhatunk margókat, kereteket:

Háromoszlopos oldalfelépítés dobozokkal.

Ajánlott linkek

Miért butaság a táblázatos szerkezet? A probléma körülírása és a felkínált megoldás: http://www.hotdesign.com/seybold/hungarian/

Táblázatok vagy CSS? Weblabor fórumtéma: http://weblabor.hu/forumok/temak/16149

Alex Robinson cikke, a One true layout: http://www.positioniseverything.net/articles/onetruelayout/

Interaktív elrendezés készítő a One true layout cikkhez kapcsolódva: http://www.fu2k.org/alex/css/onetruelayout/example/interactive

Dynamic Drive CSS elrendezések, tesztelve a legújabb böngészőkön is: http://www.dynamicdrive.com/style/layouts/

Strictly CSS, itt is nagyon jó elrendezések találhatók: http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need

Layout Gala - egy HTML kód, 40-féle elrendezés: http://blog.html.it/layoutgala/