Téma: Táblázat vagy CSS DIV ?

Táblázat vagy CSS DIV ?

A sok tévhit kering, hogy táblázat vagy DIV.
Gyakorlatilag mindkettő kitűnően használható, a legjobb és legegyszerűbb, ha vegyesen építjük fel velük a honlapot.
A középre igazított, képernyőmérethez igazodó honlapoldal átlátható vázszerkezetének felépítéséhez, a forráskódban is egyszerűen követhető táblázatos szerkesztés nagyon egyszerű, míg a belső szövegtartalom stílus paraméterezett DIV-ekkel oldható meg szépen.

Gondolom most áll égnek mindkét szerkesztési eljárás fanjainak a haja, de nézzük át milyen tulajdonságok, előnyök és hátrányok jellemzik e két html tag használatát azon három szempont alapján, amelyek érdemi különbséget jelentenek:
-SEO (webes keresőprogramok találati lista sorrend)
-akadálymentes felület (csökkent látók számára szövegfelolvasás)
-szerkeszthetőség, böngészőfüggetlenség

SEO
Szavak, mondatok sorrendje a forráskódban eltérő.
A DIV-ekben folytonos a szöveg, míg a táblázatsorokban távol kerülhetnek egymástól összetartozó szavak, mondatok. (cellán belül folytonos a szöveg !), így egyes tartalmi elemek sorrendje szabadabban alakítható a kódban CSS-DIV használattal, ezért esetleg nagyobb lehet az esélye, hogy jobban szerepel a találati rangsorban. (Kulcsszótávolság meghatározása, Kulcsszavak súlyozása)
A táblázatos elrendezésű oldal azért nem szükségszerűen rossz a keresőkre optimizálás szempontjából, mint ahogyan a tisztán stíluslapokkal elrendezett oldal sem jelent szükségszerűen előnyt.

AKADÁLYMENTES FELÜLET (csökkent látók számára szövegfelolvasás).
A fogyatékkal élők a forráskód szövegének eltérő sorrendje miatt szembesülhetnek össze nem tartozó mondatokkal, ha felolvastatják maguknak az oldal tartalmát.

SZERKESZTHETŐSÉG, böngészőfüggetlenség.
Ez egy kicsit szőke vagy barna terület .. kinek mi tetszik. A táblázatos szerkesztés esetleg átláthatóbb, így speciális (DW8+) szerkesztőprogram nélkül is létrehozható vele honlapoldal.
Gyakorlatilag egy fontos dolog van, ha szerkesztéskor figyelünk a képernyőméret különbségekre, akkor CSS-DIV-vel összerakott oldalnál például a három oszlopos oldal bomoljon le egy oszloposra, hogyha nem elég széles a képernyő, míg a táblázatos építésnél százalékos cellaszélességgel kerülhetjük el a vízszintes görgetést, vagy üres területek megjelenését.
Ajánlatos figyelni erre, mert kis képernyővel rendelkező mobil eszközökön könnyen olvashatatlanná válik a honlap. (PDA, iPAD, Palmtop, Handheld PC, mobiltelefonok).
Persze vannak ajánlások amelyek igyekeznek néha önönérdekű szabályelvekbe szorítani technikákat, ráadásul a modern böngésző programok készítői, általában multinacionális okokból sajátos html és javascript értelmezést, megjelenítést produkálnak.
Ha valaki szép munkát akar kiadni a kezéből, akkor nem okvetlenül hagyatkozik a szerkesztőprogramok kínálta előgyártott programkódokra, ugyanakkor természetesnek veszi, hogy legalább mind az öt vezető programmal leellenőrzi (IE, FF, GC, O, S) munkáját.

Végezetül két DEMAGÓG, értelmetlen nézet a táblázatos szerkesztés ellen.
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 meg nem adattábla.
(a szabályelvűség mintapéldánya: a járda ott legyen ahova tervezték, nem pedig ahol céljuk érdekében naponta kijárják az emberek a gyepen keresztül)
2. A kód több helyet foglal.
(ezt talán nem is kommentálom .. )

---

Hasonló témák:

• Táblázat
• Táblázat Word-ből html-be
• A PageRank ( PR ) táblázat
• Css táblázat, 2 oszlopos
• táblázat nélküli oldalfelépítés

Egyáltalán nem értek veled egyet, olvasd el Jeffrey Zeldman: Szabványkövető webtervezés című könyvét. Nagy hasznodra lesz!

Szerintem simán provokál a hozzászóló...Kb. 3-4 éve lezárult ez a vita...

fetya1 eredeti hozzászólása

...a legjobb és legegyszerűbb, ha vegyesen építjük fel velük a honlapot.

Ezzel a mondattal megbukott a téma. Olyasmit közölsz tényként, amivel az itt jelenlévő tagok 99%-a (rajtad kívül mindenki) vitába szállna.

Css kóddal lehet formázni a táblázatokat és a cellákat, csak értelmetlen. És akkor is nagyobb méretű forráskódot generálsz, még ha a hozzászólásod zárógondolata szerint ez nem is méltó szempont a kommentálásodra.

Most vitatkozhatnánk, hogy a tartalom és kód aránya, illetve a betöltődés sebessége mennyire meghatározó az organikus találati lista felállításakor, de ezekről már született topic.

Szerintem vedd elő a notepad-ot és kísérletezz! Felejtsd el kicsit a DreamWeaver, FrontPage és hasonló programokat, amelyek pont arra jók, hogy az alapokat ne tanulja meg az ember. Szerintem egy hónap múlva Te is máshogyan vélekedsz a saját hozzászólásodról.

És egy harmadik demagóg nézet a táblázatos szerkesztés ellen, így 2011 végén, amikor már a vécédeszka is html5 alapú, használjuk a html5 dokumentumtípust és a szemantikusabb html5 tag-eket.

Amúgy csatlakozom lexxx7-hez, vegyél elő egy notepad-ot

Csak azt nem értem, hogy hogyan lehet erről vitázni mikor a kettő két különböző dolog, itt nem arról van szó, hogy táblázat vagy div, hanem táblázat és div, mert ha táblázatot akarok készíteni azt biztos nem fogom divekkel megoldani, de ha szöveget akarok megjeleníteni azt sem teszem táblázatba.

A topicnyitó ugyanezt az 'érdekes' hozzászólást elkövette a weblabor-on, tán a reakciókat tesztelendő?

stvn eredeti hozzászólása

Csak azt nem értem, hogy hogyan lehet erről vitázni mikor a kettő két különböző dolog, itt nem arról van szó, hogy táblázat vagy div, hanem táblázat és div, mert ha táblázatot akarok készíteni azt biztos nem fogom divekkel megoldani, de ha szöveget akarok megjeleníteni azt sem teszem táblázatba.

Itt oldalelrendezésről van szó, régebben táblázatokkal oldották(uk) meg. De vitáról szó sincs, ez egy több éve lezárt dolog...