Table

Geschikt voor het tonen van tabulaire data, niet voor opmaak. Probeer het gebruik van tabellen te beperken, omdat tabellen lastig zijn voor screenreaders.

Eenvoudige tabel

Geef elke tabel de class .table. Voor een tabel met afwisselde achtergronden voeg je ook de class .table--striped toe. Plaats de tabelkoppen in een <thead> en de daadwerkelijke data in een <tbody> element.

Gebruik het scope attribuut op de <th> elementen om aan te geven of de header voor een kolom of een rij is. Dit zorgt er voor dat screenreaders beter de tabel begrijpen.

Voeg een caption toe met de beschrijving van de tabel of verwijs naar een beschrijving buiten de tabel met een aria-describedby

Tabelvoorbeeld per jaar.

2014 2015 2016
Foo 124 42 252
Bar 42 526 12
Baz 736 367 234

Responsive tables

Tabellen zijn van zichzelf niet responsive. Op mobiele devices is het lastig tabulaire data overzichtelijk weer te geven.

Middels de .table--responsive modifier en wat extra attributen kan een tabel enigszins responsive gemaakt worden.
Voeg aan elke data cel het attribuut data-col toe, met als waarde de naam van die kolom.
Maak het scherm kleiner om het verschil tussen deze en bovenstaande tabel te zien

2014 2015 2016
Foo 124 42 252
Bar 42 526 12
Baz 736 367 234

Automatisch responsive tabellen

Met javascript kunnen eenvoudige tabellen (1 rij headings) responsive gemaakt worden. De data-col attributen worden dan automatisch op de cellen geplaatst.

Voorbeeld automatische responsive tabel
2014 2015 2016
Foo 124 42 252
Bar 42 526 12
Baz 736 367 234

Tabel met hover effect

Voor tabellen waarbij complete rijen klikbaar en/of selecteerbaar zijn, kan de class .table--hoverable worden toegevoegd.

Voorbeeld hover effect
2014 2015 2016
Foo 124 42 252
Bar 42 526 12
Baz 736 367 234

Complexe tabellen

Om ervoor te zorgen dat de tabel over de gehele breedte wordt geplaatst, voeg je de modifier .content--wide toe aan het block waarin je hem plaatst.

Met de modifier .table--small-font wordt de fontgrootte iets verkleind, geschikt voor tabellen met veel kolommen.

Jaarresultaat
2011 - 2012 2012 - 2013 2013 - 2014 2014 - 2015
Brinnr Naam Instelling Inst. Vgl Grp Inst. Vgl Grp Inst. Vgl Grp Inst. Vgl Grp
01IC AOC Oost 81,1% 71,1% 79,8 74,7% 77,1% 74,6% 83,7% 77,2%
01NJ Terra 75,5% 71,1% 77,1 74,7% 75,6% 74,6% 75,8% 77,2%
01OE Wellantcollege 70,0% 71,1% 73,7 74,7% 75,6% 74,6% 76,7% 77,2%
11UL Edudelta Onderwijsgroep 71,0% 71,1% 76,4 74,7% 69,1% 74,6% 79,1% 77,2%
12VI Nordwin College 77,4% 71,1% 80,8 74,7% 78,8% 74,6% 78,7% 77,2%
13US AOC De Groene Welle 76,8% 71,1% 78,9 74,7% 77,4% 74,6% 80,5% 77,2%
14YD Lentiz 78,3% 71,1% 81,5 74,7% 84,5% 74,6% 81,2% 77,2%
21CS CITAVERDE College 71,3% 71,1% 78,5 74,7% 80,3% 74,6% 77,8% 77,2%
21CY AOC West Brabant 72,9% 71,1% 70,4 74,7% 70,4% 74,6% 75,7% 77,2%
25EF Clusius College 73,0% 71,1% 79,2 74,7% 77,0% 74,6% 80,0% 77,2%
25GV AOC Groenhorst 72,7% 71,1% 76,7 74,7% 76,7% 74,6% 73,1% 77,2%
26CC Helicon 64,2% 71,1% 68,8 74,7% 69,3% 74,6% 74,8% 77,2%
24ZV Effatha Chr Sch v BBO 87,5% 76,2% 71,4 80,0% 0,0% 25,0% 66,7% 80,0%
24ZW BBO de Schalm 40,0% 76,2% 100,0 80,0% 50,0% 25,0% 100,0% 80,0%
00GT ROC Albeda College 62,9% 69,4% 66,5 72,0% 68,4% 73,3% 70,0% 74,0%
01AA Landstede 70,8% 69,4% 70,8 72,0% 74,8% 73,3% 76,1% 74,0%

Selectie van 1 of meerdere rijen

Geef elke tr de class.row--selected om de rij te selecteren.


Tabelvoorbeeld per jaar.

2014 2015 2016
Bar 143 446 833
Foo 124 426 252
Bar 423 526 128
Baz 736 367 234
Foo 352 634 146
Bar 736 367 234

Benodigde stylesheets

  • /uno/components/table/table.css