Waarom DIV's gebruiken i.p.v. tables of zelfs frames?

Allen hebben ze voor en nadelen en allen hebben ze ook een specifiek doel. Vaak worden tables en frames voor het verkeelde doeleinde gebruikt zonder dat de (beginnende) webdesigner dit zelf weet.

Frames
Frames worden door velen afgeraden omdat ze ongelofelijk veel nadelen hebben. Hier heb je er enkele:
Als een gebruiker je site bookmarked nadat hij in een paar frames doorgeklikt heeft, komt hij niet terug op de pagina waar hij was, want er wordt een link gelegd naar de pagina die alle frames bij elkaar houdt. De URL's kloppen dus zogezegd niet meer.
Ooit al es een pagina met frames proberen afdrukken? Dat is om problemen vragen...
Searchengines, zoekrobots, hebben ook problemen met frames want ze weten niet of een pagina al dan niet tot een frameset behoord.
Verder kan er verwarring ontstaan: waar gaat de link verschijnen die je net aangeklikt hebt?
Tot zo ver de nadelen, voordelen zijn er eigenlijk bijna niet. Soms zijn frames handig als je host geen SSI's ondersteund zoals PHP of ASP, anders moet je op x aantal pagina's steeds het zelfde menu of de zelfde header plaatsen.

Tables
Tables hebben één doel: gegevens structureel voorstellen. Daarvoor dienen gewoon tabellen. Vaak worden vijf tables in en rond elkaar gebruikt terwijl je eenvoudigweg een DIV kan gebruiken met wat CSS.
Jammergenoeg ondersteunen niet alle browsers (eigenlijk wel alle, maar enkel IE niet) even goed CSS. Daarom kan het soms wel handig zijn om de basislay-out van je site te bepalen met één table.
Ook niet alle mensen hebben een breedbandlijntje, de meesten surfen nog altijd via 56K. Hoe meer code, hoe langer de pagina moet laden, en wat is het kortste denk je, vijf tables rond elkaar of één div met één CSS-bestand?

DIV's
DIV's zijn zoals gezegd de beste methode om te lay-outen. Ze worden, in combinatie met CSS, aangeraden door zowel mensen van het W3C als door vooraanstaande webgoeroes zoals Jeffrey Zeldman of Jakob Nielsen. En meer en meer programma's leggen de nadruk op het gebruik van DIV's en CSS, zoals het vaak geprezen Macromedia Dreamweaver.
DIV's zijn handig omdat je dan meer controle krijgt over het design van je site. Table's hebben bv. properties zoals cellpadding en cellspacing die je niet kan aanpassen via CSS.
Het web wordt ook meer en meer toegankelijk via alternatieve hardware zoals PDA's of zelfs GSM's. Doordat de ruimte op die schermpjes letterlijk beperkt is, is het nagenoeg onmogelijk om gigantische tables of frames er op te proppen.

Conclusie
Frames en tabellen zijn enkel te gebruiken in specifieke gevallen, voor andere doeleinden, meer bepaald de lay-out, zijn ze af te raden.

Handige links
Tutorials en resources
Glish.com: CSS layout techniques
W3Schools CSS Tutorial
Mezzoblue | CSS Zen Garden | Resource Guide
The Layout Reservoir - BlueRobot
Practical CSS Layout Tips, Tricks, & Techniques
W3C
W3C CSS Validation Service
Cascading Style Sheets home page
Andere
The Web Standards ProjectDit artikel werd geschreven door rObkE op vrijdag 31 oktober 2003 om 02:41 en werd sindsdien 10608 keer gelezen.

  • Pagina
  • 1 van 1

Bericht geplaatst door Percept op vrijdag 20 augustus 2004 om 18:47:58.
Percept heeft nog geen avatar toegevoegd
Multiviteit: 2
webdesigner
Er wordt naar mijn mening doormiddel van dit artikel een fout beeld gegeven van de complexiteit van XHTML in combinatie met CSS. Je kan helemaal geen 5 (complexe) geneste tabellen vervangen door 1 div, was het maar waar.
Bericht geplaatst door rObkE op vrijdag 20 augustus 2004 om 20:09:56.
rObkE heeft nog geen avatar toegevoegd
Multiviteit: 3765
Voor de lay-out is het perfect mogelijk. Het is zelfs gemakkelijker. Met CSS kun je elements tot op de pixel positioneren.
Voor tabulaire data (statistieken, ...) mag je natuurlijk tables blijven gebruiken, daar dienen ze voor.
Bericht geplaatst door Percept op vrijdag 20 augustus 2004 om 22:40:29.
Percept heeft nog geen avatar toegevoegd
Multiviteit: 2
webdesigner
Volgens mij hebben we het beide over iets anders. Wat ik bedoel is dat je geen ingewikkelde layout opgebouwd uit 5 tabellen kan vervangen door 1 simpele div. Het positioneren van die div heeft er op dit vlak niets mee te maken.
Bericht geplaatst door rObkE op maandag 23 augustus 2004 om 19:39:12.
rObkE heeft nog geen avatar toegevoegd
Multiviteit: 3765
Jah, natuurlijk niet door één DIV. Das ook niet de bedoeling.
Bericht geplaatst door een gast op vrijdag 8 oktober 2004 om 22:05:44.
Nog maar eens een artikel waarin IE gebashed wordt.
IE & Firefox bekijken beiden het box model verkeerd, maar IE bekijkt het zeker het beste, dus gaan zeveren dat alleen IE het fout doet is n00b en flaming @ microsoft. Als gij een div maakt met een fixed height zal die in IE bij het overschreiden van die height door uw content gewoon uitgerokken worden terwijl hij in FF even groot blijft en de tekst gewoon vrolijk over de rand loopt en verder.

Dan kan jij nog zeggen van, ja maar daar hebt ge css oplossingen voor, nuja, die hebt ge ook voor IE, maar dat is toch ook grote brol zeker.. hmm, geen ironic icoontje hier. 't Is maar om te zeggen, bash ms als je juist zit niet omdat je het graag doet
Bericht geplaatst door rObkE op zondag 10 oktober 2004 om 19:20:23.
rObkE heeft nog geen avatar toegevoegd
Multiviteit: 3765
Het artikel is dan ook één-en-al MS bashing. Je hebt volkomen gelijk. (zzz)
Het enige wat er staat dat in de verste verte wel iets met Microsoft zou kunnen te maken hebben, is:

Dixit

Jammergenoeg ondersteunen niet alle browsers (eigenlijk wel alle, maar enkel IE niet) even goed CSS.
En dat is een feit.
IE's box model beter dan dat van Firefox? Laat mij niet lachen. ;) Paddings die plots verdubbelen als je een DIV float, en dingen die helemaal niet werken zonder je hacksdoos boven te halen. Het boxmodel van Firefox en Opera is nagenoeg trouwens identiek.
En een DIV met fixed height. Wat denk je wel dat de bedoeling is van een vaste hoogte? Dat die uitgerokken wordt zeker? (zzz)
Deze tekst werd het laatst bewerkt door rObkE op zondag 10 oktober 2004 om 19:21:31.
Bericht geplaatst door een gast op dinsdag 7 juni 2005 om 11:39:04.
Ik weet niet wie het bij het rechte eind heeft voor het bepalen van de grote van een pixel, maar ook daar verschillen IE en Firefox, wat héél vervelend kan zijn. Dan heb je ook nog het verschil dat de ene de rand meerekend en de andere niet. Dan is er ook nog een verschillende bepaling of de padding bij de breedte hoort en niet.

Bij mij staat er stevast bovenaan elke xhtml in css de volgende lijn.
CODE
  1. *{margin:0;padding:0;border:0}

en gebruik ik zo weinig mogelijk de padding-property

CSS of JS "hacks" gebruik ik nooit ... dan nog liever even de layout weizigen.
Die zijn toch gedoemd om bij de eerste de beste update van een browser
door de mand te vallen.

Het blijft frustrerend om een site te maken die er in IE en FF het zelfde uit zit.
Als dat lukt, lukt Opera en Safari meestal ook ... maar daar hecht ik geen belang meer aan ... sorry Apple-users ....
  • Pagina
  • 1 van 1