07. tabellen (css)
De standaardopmaak voor tabellen is onaantrekkelijk. Een niet-opgemaakte HTML-tabel ziet er gewoon uit waarbij enkel de caption en de th elementen in het vet staan. Gelukkig is er CSS...
Geef tijdens het opmaken van een tabel aandacht aan volgende zaken:
cellen opvullen (padding): Als de tekst in een tabelcel de rand of een andere cel raakt, is de tekst niet goed leesbaar. Voeg daarom witruimte toe wat de leesbaarheid bevordert.
koppen onderscheiden van andere cellen: Alle tabelkoppen vet maken (de standaardstijl voor het element
th) maakt het gemakkelijker om te tabel in één oogopslag te lezen. Ze kunnen ook in hoofdletters gezet worden, er kan een achtergrondkleur toegevoegd worden of ze gewoon onderstrepen om ze zo duidelijk van de inhoud te onderscheiden.even en oneven rijen andere kleur: Even en oneven rijen anders kleuren helpt de gebruiker de rijen te volgen, zeker voor tabellen met heel rijen. Door te kiezen voor subtiel kleurgebruik blijft de tabel er als één geheel uitzien (voorbeeld odd / even).
getallen rechts uitlijnen: De eigenschap
text-alignkan gebruikt worden om de inhoud van kolommen met getallen rechts uit te lijnen, zodat grote getallen duidelijk onderscheiden worden van kleinere. Volg hierbij de wiskundige manier van 'getallen schrijven'.
We hebben al verschillende CSS eigenschappen gezien die ook met tabellen gebruikt kunnen worden. Enkele voorbeelden:
widthom de breedte van de tabel op te gevenpaddingom de ruimte tussen de rand van elke cel en de inhoud ervan in te stellentext-transformom de inhoud van de koppen van de tabel om te zetten in hoofdlettersletter-spacingenfont-sizeom aanvullende styling aan de inhoud van de tabelkoppen toe te voegenborder,border-topenborder-bottomom randen boven en onder de tabelkoppen in te stellentext-alignom tekst van bepaalde cellen links uit te lijnen en die van de andere rechtsbackground-colorom de achtergrondkleur van de even en oneven rijen in te stellen:hoverom een rij te markeren wanneer een gebruiker er met de muis overheen zweeft
meer info
Last updated