Tabellen in HTML zijn niet Taboe!
Tabellen mogen niet meer… Dit is een van de meest gemaakte fouten van een beginnend webdesigner die zich aan CSS waagt.
Ze hebben een paar keer gelezen dat ze op het ‘nieuwe web’ geen tabellen meer mogen gebruiken, maar dat is niet helemaal waar.
Het gaat over de manier waarop je ze gebruikt.
Om duidelijk te maken hoe het zo ver heeft kunnen komen met tabellen, gaan we een reis terug in de tijd maken naar toen websites net begonnen op te duiken.
“In den beginne…”, nee dat is iets te lang geleden. Toen hadden ze nog niet eens stroom, laat staan computers.
Het internet is heel simpel begonnen als een medium waar informatie over verspreid kon worden. Toen was dat alleen nog maar tekst en de browsers ondersteunden zelfs nog geen plaatjes. In die tijd was het ontwikkelen van internet sites ook nog voorbehouden aan programmeurs die verstand van zaken hadden.
Zelf een website maken werd pas gedaan door het grotere publiek toen de zogenaamde WYSIWYG-editors (What-You-See-Is-What-You-Get) verschenen.
Het werd makkelijker en ook aantrekkelijker omdat browsers ook het gebruik van plaatjes ondersteunden. Dus en visueel aantrekkelijke site was zo gemaakt.
Het web werd overspoelt met simpele, amateuristische sites die maakten van tabellen om de plaatjes van de interface te positioneren. En dat is precies waar het fout gegaan is.
Zo komen we weer in deze tijd terecht en waar er andere (betere) manieren zijn om een lay-out vorm te geven. Daar kom ik zo op terug.
Waar tabellen voor bedoeld zijn
Tabellen zijn niet bedoeld om een interface maken. Dat is waar de divs ten tonele komen. Ten eerste zijn divs nauwkeuriger te positioneren dan tabellen en je website zal ook een stuk sneller laden dan wanneer je overal tabellen gebruikt.
Dat heeft niet zozeer te maken met de hoeveelheid code die je gebruikt, maar met de manier waarop tabellen worden geïnterpreteerd door browsers.
Ook voor het indelen van simpele stukken tekst zijn er veel betere, duidelijkere manieren dan op het gebruik van tabellen terug te vallen.
Hier zijn speciale tags voor gemaakt die dat een stuk makkelijker maken, hier volgen er een paar:
<p>, <q>, <em>, <blockquote>, <code> <h1>, <h2>, ..., <h6> <hr />, <br /> <ul>, <ol>, <li>
Om er zo maar een paar te noemen. Als je de volledige lijst wil zien, raad ik je aan om even op www.w3.org te kijken.
Daar staat de volledige lijst en of ze nog ondersteunt worden door de huidige browsers. Want het web verandert constant, maar dat heb je vast al door.
Wil je wekelijks nieuwe tips over HTML & CSS, bloggen of websites maken? Meld je aan voor de HTML-site Nieuwsbrief!
Nu komen we dan eindelijk uit op het onderwerp waar we over begonnen zijn: tabellen!
Waar mag je ze dan wel gebruiken?
Om te beginnen zijn tabellen bij verre weg de meest geschikte manier om grote hoeveelheden data op een overzichtelijke manier te ordenen.
De rijen of kolommen geven dan aan welke data bij elkaar hoort en de aparte cellen zijn goed te onderscheiden waardoor je in een oogopslag kan vinden waar je naar zoekt.
Nu denk je misschien bij jezelf ‘Leuk die tabellen, maar zijn zo afschuwelijk lelijk!’.
Dan zou ik zeggen, wat houdt je tegen om die tabel op dezelfde manier te stijlen als je gedaan zou hebben met een div?
Met een klein beetje CSS kan je tabel er als nooit tevoren uitzien.
Dat is ook een ding wat je goed moet onthouden: CSS bepaald hoe je site eruitziet in de browser, niet hoe je je HTML moet schrijven.
Het correcte gebruik van HTML en CSS is iets wat je moet leren, maar dat gaat beter naarmate je er meer mee werkt. Denk maar terug aan je kleutertijd… als je toen een kleurplaat kreeg, kon je het niet voor elkaar krijgen om binnen de lijntjes te kleuren.
Nu je wat ouder bent en wat meer controle hebt over je handen, kan je wel binnen de lijntjes blijven.
Zo kan je de HTML zien als de lijntjes, het bepaald wat er op de kleurplaat staat.
Je viltstiften zijn de CSS, daarmee bepaal je hoe het eruit ziet.
Samenvattend: Tabellen, HTML en CSS
Om nog even terug te komen op de zaken die zijn besproken:
– Tabellen gebruik je om grote hoeveelheden data te ordenen
– Gebruik de juiste html-tags om je tekst te verdelen in logische blokken
– Divs gebruik je voor je lay-out (o.a.)
– CSS gebruik je puur voor het uiterlijk van je site, niet de structuur
– En blijf binnen de lijntjes!
Dit artikel is geüpdatet op 4 mei 2020
