Standaard opmaak

Probleem

De standaard opmaak is echter onaantrekkelijk. Gelukkig kunnen we de tabel met behulp van CSS het uiterlijk van onze tabel gegevens zelf controleren.

De Jommeke's gegevens, die we in een HTML-tabel geplaatst hebben is een voorbeeld van spreadsheet gegevens. De niet opgemaakte HTML-tabel ziet er gewoontjes uit.

Alleen de caption en de th elementen staan standaard in het vet:

Design

We hebben al verschillende CSS eigenschappen gezien die ook met tabellen gebruikt kunnen worden. Hier volgen 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-spacing en 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

Let erop dat je bij het opmaken van een tabel aandacht besteed aan:

• Voorzie cellen van opvulling: als de tekst in een tabelcel de rand of een andere cel raakt, is de tekst niet goed leesbaar. Voeg opvulling toe en de leesbaarheid verbetert.
• Onderscheid koppen van de andere cellen: alle tabelkoppen vet maken (de standaardstijl voor het element <th>) maakt het gemakkelijker om te tabel in één oogopslag te lezen. Je kunt ze ook in hoofdletters zetten en ze een achtergrondkleur geven of ze onderstrepen om ze duidelijk van de inhoud te onderscheiden.
• Geef even en oneven rijen een andere kleur: rijen om en om kleuren helpt de gebruiker de rijen te volgen. Gebruik een kleur die subtiel afwijkt van de andere rijen zodat de tabel er als één geheel blijft uitzien.
• Lijn getallen rechts uit: je kunt de eigenschap textalign gebruiken om de inhoud van een kolom die getallen bevat rechts uit te lijnen, zodat grote getallen duidelijk onderscheiden worden van kleinere. Op die manier volg je de wiskundige manier van getallen schrijven.