[buildup] Waarom css div's ipv tables?

[Verwijderd]

ik hoor nou van verschillende kanten dat je css divs "moet" gebruiken ipv tables. maar waarom? css zitten veel meer bugs in dan in tables (laat staan hoe erg het NIET cross-browser werkt) en het is in mijn ogen minder logisch, gezien ik al jaren pagina maak dmv tables.
is er iets wat ik mis ofzo?

[ Voor 6% gewijzigd door Verwijderd op 04-03-2006 20:36 . Reden: titel aangepast edit: kan blijkbaar niet :P ]

[markvt]

Tables zijn niet bedoelt om je sitelayout mee te maken..

[Verwijderd]

css voor opmaak.
tables voor informatie.

als je het een beetje redelijk doet met css en opmaak, scheelt het uiteindelijk in de onderhoud kwa tijd

[AtleX]

Tables zijn nooit bedoeld voor layout. Een layout gemaakt met tables is moeilijker te onderhouden en de zoekmachine-indexatie van zo'n layout is ook minder dan die van een correct opgebouwde pagina.

En doe eens zoeken naar semantiek enzo, er zal een wereld voor je open gaan.

[Yoozer]

Verwijderd schreef op zaterdag 04 maart 2006 @ 20:35:
ik hoor nou van verschillende kanten dat je css divs "moet" gebruiken ipv tables. maar waarom?

Niet dat ik nou lullig wil doen, maar dit is al heel erg vaak hier langsgekomen .

css zitten veel meer bugs in dan in tables

Tables zijn nooit bedoeld geweest voor layouts in te maken. Ik wil trouwens je bugs nog wel eens zien als je een design moet aanpassen met een paar colspans en rowspans.

(laat staan hoe erg het NIET cross-browser werkt) en het is in mijn ogen minder logisch, gezien ik al jaren pagina maak dmv tables.

Nee, het gebruik van tables is nou juist minder logisch. Tables zijn voor tabulaire data - informatie die met elkaar te maken heeft. Een layout is vaak een navigatiedeel (een lijst met links : daar moet je ook een lijst voor gebruiken), en opsmuk (geen tabulaire data dus).

is er iets wat ik mis ofzo?

Behalve de suggestie om op semantiek te Googlen, zoek ook hier eens in W&G op het woord.

Verder zijn tabellen zo grid-achtig en linear als het maar kan; je dwingt jezelf tot een hele saaie manier van designs maken.

[ Voor 21% gewijzigd door Yoozer op 04-03-2006 20:43 ]

[ralpje]

Verwijderd schreef op zaterdag 04 maart 2006 @ 20:35:
(laat staan hoe erg het NIET cross-browser werkt)

css werkt prima cross-browser hoor. Alleen moet je erom denken dat je je ontwerp test in bijvoorbeeld Firefox. Issie daar goed, dan is 'ie het in IE ook. Andersom is het lastiger
Daarnaast: css maakt je site gelijk prima geschikt voor gebruik in combinatie met een browser die de css-data niet gebruikt, zoals bijvoorbeeld op een PDA. Een site met tables als layout gaat dat niet doen.

[Snake]

ralpje schreef op zaterdag 04 maart 2006 @ 20:40:
[...]


css werkt prima cross-browser hoor. Alleen moet je erom denken dat je je ontwerp test in bijvoorbeeld Firefox. Issie daar goed, dan is 'ie het in IE ook.

zwansworst, hoe vaak moet je niet hacks en zo toepassen om je site fatsoenlijk te krijgen in IE, als je ontwerpt op FF

[Verwijderd]

Verwijderd schreef op zaterdag 04 maart 2006 @ 20:35:
ik hoor nou van verschillende kanten dat je css divs "moet" gebruiken ipv tables. maar waarom?

Dat wordt hier elke week al 6 keer uitgelegd. Kijk hier maar eens goed naar.

css zitten veel meer bugs in dan in tables (laat staan hoe erg het NIET cross-browser werkt) en het is in mijn ogen minder logisch, gezien ik al jaren pagina maak dmv tables.
is er iets wat ik mis ofzo?

Dit zijn zulke lompe opmerkingen dat ik er verder niet eens op in ga. Doe research.

[-Lars-]

ralpje schreef op zaterdag 04 maart 2006 @ 20:40:
[...]

Alleen moet je erom denken dat je je ontwerp test in bijvoorbeeld Firefox. Issie daar goed, dan is 'ie het in IE ook. Andersom is het lastiger

Dat is niet geheel waar natuurlijk. Wanneer je in een geavanceerde browser ontwikkelt en daarna overstapt op testen in MSIE, zul je zien dat niet altijd alles werkt: CSS3-ondersteuning ontbreekt, CSS2-ondersteuning is gebrekkig, et cetera.

@TS, let op dat een CSS-layout niet hetzelfde is als een div-layout. Zorg ervoor dat je je eerst verdiept in semantiek en CSS, voordat je het opgeeft en snel weer teruggaat op een table-layout. Neem er in ieder geval meer tijd voor dan je hebt genomen om research te doen voordat je dit topic opende.

[Verwijderd]

ik heb veel eerdere topics erover gelezen maar het lijkt erop dat iedereen meer overstapt "omdat het moet" dan dat het handig is.
zelf heb ik net een site afgemaakt in tables (http://www.clananimism.com/, misschien geen supervoorbeeld om mijn standpunt te tonen, maar wel relevant) en voor het copyright dingetje wat geëxperimenteert met een div.
al had ik deze div boven de table tag gezet was de hele pagina corrupt, als ik width: 100% doe werkt die wel in firefox maar wordt die 200% in IE, er klopt gewoon helemaal niets van.
waarom zou het nou slimmer zijn geweest om dezelfde pagina helemaal in div's op te bouwen, zo werkt die toch ook?

en btw, van dat het helemaal een grid en saai wordt lijkt me meer afhankelijk van de ontwerper en hoe goed die in z'n vak is

[ Voor 7% gewijzigd door Verwijderd op 04-03-2006 20:57 ]

[Verwijderd]

html is helemaal niet bedoeld voor alles waarvoor het vandaag de dag gebruikt wordt. Waar het om gaat is of het werkt of niet. Het idee is dat div's veel makkelijker werken dan tables, maar helaas is de realiteit vandaag de dag dat het allebei kut werkt. En de klant, die is alleen geïnsteresseerd in het eindreslutaat.

[martijnve]

ralpje schreef op zaterdag 04 maart 2006 @ 20:40:
[...]


css werkt prima cross-browser hoor. Alleen moet je erom denken dat je je ontwerp test in bijvoorbeeld Firefox. Issie daar goed, dan is 'ie het in IE ook. Andersom is het lastiger
Daarnaast: css maakt je site gelijk prima geschikt voor gebruik in combinatie met een browser die de css-data niet gebruikt, zoals bijvoorbeeld op een PDA. Een site met tables als layout gaat dat niet doen.

ik heb laats nog meerdere css correcte websites gemaakt die in firefox en hordes andere browsers perfect werken en in internet explorer zwaar waardeloos zijn. En ja ze valideerden en nee ik heb het niet expres gedaan :-)

[heiyu]

@PreatORiAn_
Verschil zit em ook in de type van de website. De voorbeeld die je laat zien is een vrij statische website met bijna vaste data en layout. En is de manier waarop je het hebt gedaan niet fout of niet cool omdat je geen css hebt gebruikt (lekker boeien zou ik zeggen)
Vooral bij een dynamische website zal je het nut van css inzien. Een site zoals tweakers.net of een wegblog bouwen in tables kan je vergeten. CSS biedt meer mogelijkheden is daardoor krachtiger en heeft uiteindelijk vaak de voorkeur.

CSS valid wilt nog niet zeggen dat het op alle browsers werken omdat de browser de regels allemaal verschillend interpreteert. Zoals outline om een image; outline inside/outside/on kan verschillend zijn op verschillende browsers en versies. De skill is juist om daar rekening mee te houden als programmeur.

[ Voor 50% gewijzigd door heiyu op 04-03-2006 21:14 ]

[Borizz]

Verwijderd schreef op zaterdag 04 maart 2006 @ 20:55:
ik heb veel eerdere topics erover gelezen maar het lijkt erop dat iedereen meer overstapt "omdat het moet" dan dat het handig is.
zelf heb ik net een site afgemaakt in tables (http://www.clananimism.com/, misschien geen supervoorbeeld om mijn standpunt te tonen, maar wel relevant) en voor het copyright dingetje wat geëxperimenteert met een div.
al had ik deze div boven de table tag gezet was de hele pagina corrupt, als ik width: 100% doe werkt die wel in firefox maar wordt die 200% in IE, er klopt gewoon helemaal niets van.
waarom zou het nou slimmer zijn geweest om dezelfde pagina helemaal in div's op te bouwen, zo werkt die toch ook?

en btw, van dat het helemaal een grid en saai wordt lijkt me meer afhankelijk van de ontwerper en hoe goed die in z'n vak is

Het is zeker geen supervoorbeeld nee. Ik heb er een paar opmerkingen over:
* Waarom gebruik je niet 1 achtergrond afbeelding i.p.v. allemaal losse images in de tabelcellen laden (scheelt een hoop serververzoeken door de client en waarschijnlijk ook in dataverkeer).
* Waarom gebruik je die tabel om je data op een bepaalde plaats neer te zetten, terwijl je met CSS heel makkelijk iets op een bepaalde plaats neer kan zetten en later makkelijk kan verplaatsen door enkel je CSS aan te passen!
* Waarom sluit je je image (& link) tags af met een / terwijl je geen XHTML doctype gebruikt (zelfs geen enkel standaard doctype zover ik kan zien).

[Verwijderd]

@Borizz
* Orgineel was het concept anders en kwam er rechts nog wat info, dit heb ik er alleen uitgehaalt zonder 'm opnieuw te slicen
* Ik zou niet weten hoe. een div neerzetten zou -lijkt me- totaal onafhankelijk van de tabel zijn (qua positionering) als je 'm in die cell wilt hebben.
* orgineel had het een doctype en xhtml tag, maar toen kreeg ik de pagina niet in het midden, toen ik deze eruit haalde werkte het ineens wel.

[ Voor 44% gewijzigd door Verwijderd op 04-03-2006 21:31 ]

[Borizz]

Verwijderd schreef op zaterdag 04 maart 2006 @ 21:26:

@Borizz
* Orgineel was het concept anders en kwam er rechts nog wat info, dit heb ik er alleen uitgehaalt zonder 'm opnieuw te slicen
* Ik zou niet weten hoe. een div neerzetten zou -lijkt me- totaal onafhankelijk van de tabel zijn (qua positionering) als je 'm in die cell wilt hebben.
* orgineel had het een doctype en xhtml tag, maar toen kreeg ik de pagina niet in het midden, toen ik deze eruit haalde werkte het ineens wel.

* dat is ook gewoon mogelijk met een achtergrondafbeelding hoor?
* die div zou inderdaad helemaal onafhankelijk van de tabel gepositioneerd kunnen worden (dat is juist het punt).
* Ook daar zijn oplossingen voor, maar waarom gebruikte je een XHTML doctype dan? Misschien kan je dit eens lezen? En als je geen XHTML doctype gebruikt kan je beter een correct HTML4 doctype gebruiken wat de browsers in standards compliance mode dwingt, zodat er minder verschillen zijn tussen de CSS rendering in de verschillende browers.

[Verwijderd]

Borizz schreef op zaterdag 04 maart 2006 @ 21:34:
[...]


* dat is ook gewoon mogelijk met een achtergrondafbeelding hoor?
* die div zou inderdaad helemaal onafhankelijk van de tabel gepositioneerd kunnen worden (dat is juist het punt).
* Ook daar zijn oplossingen voor, maar waarom gebruikte je een XHTML doctype dan? Misschien kan je dit eens lezen? En als je geen XHTML doctype gebruikt kan je beter een correct HTML4 doctype gebruiken wat de browsers in standards compliance mode dwingt, zodat er minder verschillen zijn tussen de CSS rendering in de verschillende browers.

* oh je bedoelt dat je de images niet kan selecter? ik had dat eerst gedaan maar door die border wordt de rechter rij naar binnen geduwt en klopt die bij de rand niet meer
* dan zou de positionering iets zijn van 50% -*gok*px ?
* ik had ergens gelezen dat je xhtml -moest- gebruiken omdat browsers er beter op werken...of iets dergelijks. ik heb er weinig over gelezen en dat ga ik dus NU doen

[crisp]

Ik zal hier verder niet veel woorden meer aan vuil maken, slechts 1 ding: goed gebruik van CSS (en daarmee de beoogde scheiding tussen layout en content realiseren) heeft inderdaad een stijlere leercurve dan de ouderwetse recht-toe-recht-aan (en slecht onderhoudbare) table-layout methode. Zodra je het echter een beetje onder de knie hebt, de browser-nukken kent en daar ook work-arounds voor weet toe te passen wil je niet meer terug: kleine en zelfs grote aanpassingen vergen ineens nog maar een fractie van de tijd die het zou kosten als alles met geneste tables zou zijn opgezet; je code is compacter en overzichtelijker en het op een andere manier presenteren van je content is enkel een kwestie van een andere stylesheet toepassen.

Mmmz, toch nog een 2e ding: div's hebben hier weinig tot niets mee te maken; da's gewoon een HTML-element dat net als elk ander element te stylen en te positioneren is. Een div heeft in vergelijking met andere elementen weinig semantische waarde behalve dat je het kan gebruiken om elementen bij elkaar te groeperen.

[Borizz]

Precies wat crisp zegt.. Je moet je inlezen in CSS, ik krijg niet het idee dat je er al veel over hebt gelezen gezien je antwoorden. Als je daar geen tijd voor hebt, blijf je met tabellen werken. Wanneer je er even tijd in steekt en er mee gaat werken, zal je er snel de voordelen van inzien..

[Blue-eagle]

Het is lastig uit te leggen als je gewend bent met tables te werken en vervolgens te horen krijgt dat je het helemaal verkeerd doet. Vooral omdat het meer overkomt als een soort van "hype". Ik denk dat het simpel samen te vatten is: Het scheelt je op den duur enorm veel tijd.

Ik was ook sceptisch, ik dacht ook dat ik met tables veel sneller en makkelijker betrouwbare websites kon bouwen, en dat was ook zo. Totdat ik de boel onder de knie kreeg en ik nu veel sneller een site inelkaar kan zetten, waar veel makkelijker mee te werken is, waar de HTML goed gescheiden is van de CSS, wat er logisch uitziet en dus zonder al teveel commentaar in de code zelf ook leesbaar is voor collega's.

Zie het als een uitdaging

[sjaakaq]

Verwijderd schreef op zaterdag 04 maart 2006 @ 20:35:
minder logisch, gezien ik al jaren pagina maak dmv tables.
is er iets wat ik mis ofzo?

Naast alle al genoemde voordelen (als je ooit nog eens iets moet aanpassen in een veertiendubbel geneste tabel met spacer GIF's.... ) is dit natuurlijk huge kul Als iedereen alles blijft doen omdat ze dat al jaren zo doen, komt de vooruitgang tot een stilstand hè

Volg een paar tutorials zodat je een beetje weet hoe je DIV's in je CSS zet enzo, en ga dan gewoon ontzettend hard prutsen. Verander at random een margin/padding/float/position en kijk wat er gfebeurd

[CaptBiele]

dat deze topics nog bestaan zeg