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-align kan 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:

• width om de breedte van de tabel op te geven

• padding om de ruimte tussen de rand van elke cel en de inhoud ervan in te stellen

• text-transform om de inhoud van de koppen van de tabel om te zetten in hoofdletters

• letter-spacingen font-size om aanvullende styling aan de inhoud van de tabelkoppen toe te voegen

• border, border-top en border-bottom om randen boven en onder de tabelkoppen in te stellen

• text-align om tekst van bepaalde cellen links uit te lijnen en die van de andere rechts

• background-color om de achtergrondkleur van de even en oneven rijen in te stellen

• :hover om een rij te markeren wanneer een gebruiker er met de muis overheen zweeft

meer info

• https://www.handleidinghtml.nl/css/css-tabellen/css-tabellen12.html

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables