Met tabellen toon en organiseer je data in rijen en kolommen.

Wanneer gebruik je een tabel?

Je gebruikt een tabel wanneer er data getoond wordt die vergeleken met elkaar moet kunnen worden.

Anatomie

Een tabel bestaat uit:

1. Caption: deze beschrijft de inhoud van de tabel.
2. Table header: deze bevat de titel van de kolom.
3. Table cell: bevat data.
4. Table column: bevat een verticale representatie van tabel cellen.
5. Table row: bevat een horizontale representatie van tabel cellen.

Richtlijnen

• Een tabel toont altijd een collectie tonen van gestructureerde data.
• Plaats een duidelijke en logische header boven een kolom.
• Gebruik een caption om de tabel te beschrijven.
• Kolommen worden getoond op volgorde van belangrijkheid waarbij de belangrijkste kolom als eerst geplaatst wordt.
• Zorg ervoor dat de context altijd bewaard blijft door gebruik te maken van headers die vast geplakt blijven wanneer de gebruiker naar beneden scrolt.
• Spreek menselijke taal: laat alleen relevante kolommen zien die waarde hebben. Dus geen nietszeggende referentienummers.
• Maak de tabel horizontaal scrolbaar wanneer er onvoldoende ruimte is op het scherm om de tabel volledig te tonen.
• Lijn data in tabelcellen aan de bovenkant uit om de scanbaarheid te vergroten.
• Verander de layout niet wanneer tabellen op een kleiner scherm getoond moet worden. Hierdoor verdwijnt de onderliggende semantiek van de tabel.
• Lijn tekst altijd links uit.
• Lijn getallen die een grootte vertegenwoordigen (bijvoorbeeld een geldbedrag of aantal inwoners) altijd rechts uit zodat deze beter te vergelijken zijn met andere data in dezelfde rij.
• Gebruik een monospaced font voor getallen zodat elk cijfers dezelfde ruimte innemen. Hierdoor zijn getallen die onder elkaar staan makkelijker te vergelijken.
• Lijn de header van de kolom hetzelfde uit als de data die eronder staat. Als de data rechts uitgelijnd staat, zorg er dan voor dat de header ook rechts uitgelijnd staat.
• Hou als richtlijn aan dat een rij maximaal 3 regels hoog mag zijn.
• Kader data af met een ellipsis wanneer deze te groot is om op 2 regels te passen.
• Headers starten met een hoofdletter en eindigen niet met een komma, puntkomma of punt.
• Neem meeteenheden (zoals € or m2) op in de table header. Dan hoeft dat niet telkens in de kolom. Prijs (€)
• Tekst in een cell begint met een hoofdletter
• Data in een cell bevat geen meeteenheid. Die zet je in de header.
• Wees consistent in het gebruik van decimalen.
• De sortering wordt toegepast op alle items en over alle pagina’s als er paginering is
• Kolommen die gesorteerd kunnen worden hebben een sorteer icoon.

Rijkshuisstijl

De Rijkshuisstijl kent geen specifieke voorschriften wat betreft tabellen.

Bronnen

• Data Tables
• Designing Mobile Tables - Steven Hoober