Site index
Templates
Forum
Software
Links
Contact
Waarom dit artikel? Op verschillende fora kom je regelmatig een flinke discussie tegen over het gebruik van tabellen en divs in de webdesign wereld. Het is kennelijk niet duidelijk hoe en waar beiden gebruikt moeten worden. Of het is wel duidelijk, maar men misbruikt ze. In dit artikel zal ik proberen uit te leggen wat de verschillen zijn en hoe ze juist gebruikt moeten worden.
Div
Div staat voor division. Vrij vertaald betekent het deel of afdeling. Voor meer informatie over divs en hoe ze gepositioneerd kunnen worden verwijs ik je naar het artikel [CSS] divs plaatsen.
Table
Het lijkt me onnodig om de vertaling van table te geven. Als we de dikke Van Dale erbij pakken en naar de 't' bladeren, dan lezen we bij tabel het volgende:
ta-bel (de ˜, ˜len)
1 lijst die een overzicht geeft van een aantal feiten of gegevens => tafel
Geschiedenis
De tabel is door de makers bedoeld om data gestructureerd weer te geven, zoals hier boven al verteld. Nu is er ook de mogelijkheid om de randen van de cellen onzichtbaar te maken. Op die manier werd het voor webmaster makkelijk gemaakt om ze voor hun lay-out te gebruiken. Het komt er dus op neer dat ze misbruikt worden.
Theoretisch verschil
Wanneer we naar het theoretische verschil tussen een div en tabel kijken komen we het woord semantiek tegen. Semantiek betekent "leer van de interpretatie van formele systemen". Als we dit toepassen op het onderwerp kunnen we ook zeggen: "gebruik elementen waar ze voor bedoeld zijn".
Op www.w3.org vinden we de webstandaarden. Ik citeer even twee stukjes over divs en tabellen:
The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.
The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.
De zwarte, vetgedrukte teksten geven aan waarvoor de elementen bedoeld zijn. Divs zijn dus om structuur in je document aan te brengen en tabel om data te ordenen. Het is dus niet de bedoeling dat tabellen het werk van de divs afpakken en gaan fungeren als structuur (layout).
Praktisch verschil
Naast het theoretische verschil zijn er ook nog een aantal praktische verschillen. Dat gaan we in dit deel van het artikel bekijken.
Overzichtelijkheid
Als we kijken naar een lay-out in tabellen zien we vaak tabel in tabel in tabel, enzovoorts. Het grote nadeel bij de tabel is dat je minimaal drie tags nodig hebt, namelijk de
Tabel:
HTML
- Code: Alles selecteren
<table>
<tr>
<td>Tekst</td>
</tr>
</table>
Div:
HTML
- Code: Alles selecteren
<div>Tekst</div>
Je ziet duidelijk dat de div lay-out minder code bevat waardoor deze overzichtelijker is. Ik hoor je nu denken: 'ja, maar die tabel lay-out is toch ook duidelijk'. Klopt, nu nog wel. Maar wanneer we een grotere lay-out hebben niet meer.
Voorbeeld: we maken een layout met drie kolommen, een header en een footer. In het voorbeeld gebruik ik totaal geen opmaak, enkel de HTML code. De inhoud beperk ik ook tot de benaming van het element om zo het overzicht enigszins te behouden.
Tabel:
HTML
- Code: Alles selecteren
<table>
<tr>
<td colspan="3">Header</td>
</tr>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
</tr>
<tr>
<td colspan="3">Footer</td>
</tr>
</table>
Div:
HTML
- Code: Alles selecteren
<div>Header</div>
<div>Kolom 1</div>
<div>Kolom 2</div>
<div>Kolom 3</div>
<div>Footer</div>
Hier gaat al een deel van het overzicht verloren bij de tabel layout. Bij de tabel lay-out hebben we 13 regels, bij de div lay-out slechts 5. En dan hebben we er nog niet eens inhoud in staan. Nu vraag je jezelf misschien af waarom overzicht zo belangrijk is. Wanneer er een fout zit in je lay-out kun je die niet makkelijk terugvinden als het onoverzichtelijk is. Voor jezelf is het gewoon veel makkelijker.
Grootte
Een ander voordeel, wat ik al eerder noemde, is de grootte van de HTML code. Als we bovenstaande voorbeeld er weer even bij pakken dan zien we een wezenlijk verschil tussen de grootte van de codes. In de tabel lay-out gebruiken we 111 tekens, in de div lay-out slechts 55. Wanner we dit omzetten naar bytes is het 151b versus 55b, dat is bijna één derde deel.
Doordat de grootte van je HTML code beperkt is behoud je wederom overzicht. Daarnaast scheelt het bandbreedte. Dit is misschien wat ver gezocht, maar wanneer jij een goed lopende site hebt met duizenden bezoekers per dag, dan schelen die bytes wel degelijk op een maand.
Conclusie
Een opsomming waarom je divs moet gebruiken voor je layout en geen tabellen.
- Tabellen zijn niet bedoeld om je layout in te maken, daarvoor zijn de divs bedacht;
- Een div lay-out heeft minder code, dat betekend:
- overzichtelijker;
- kleiner bestand > sneller laden;
- kleiner bestand > minder bandbreedte;
Waarvoor mag je dan nog wel tabellen gebruiken? Om data te structureren.
De omschakeling van een tabellen lay-out naar een div lay-out is niet makkelijk. Je moet namelijk op een hele andere manier gaan denken omdat de opbouw heel anders wordt. Het zal het echter wel waard zijn. Je zult merken dat zodra je door hebt hoe divs (in combinatie met CSS) werken dat je veel sneller en eenvoudiger de structuur van een layout in elkaar kunt zetten.
Wanneer je eindelijk het nut in ziet van divs moet je ze niet overal voor gaan gebruiken. Een goed voorbeeld van foutieve div code vind je hier: http://www.rikkertkoppes.com/thoughts/2005/01/11. Er zijn meer tags dan divs. Gebruik daarom overal de juiste tags voor (semantiek). Dus voor paragrafen de
Mocht je er niet uitkomen of vragen hebben, dan kun je altijd bij ons op het forum terecht.
Links
Tenslotte een aantal links met betrekking tot dit artikel:
