Table: Hovered
Het tabel component is gebasseerd op Bootstrap’s Table.
Met de volgende uitzonderingen is de markup identiek aan Bootstrap:
- Er is geen
.table-borderedvariant. - Er is geen
tr.primaryentr.secondary. - Er is geen
.table-responsivefunctionaliteit.
Een <caption> moet altijd worden geplaatst. Indien deze visueel niet wenselijk is wordt deze verborgen met .sr-only.
Zie Bootstrap Table.
Gebruik het component <table> om inhoud logisch te structureren, zodat het gemakkelijker wordt om relaties te zien en te begrijpen.
Het component <table> wordt als een data-tabel gebruikt of als data-grid.
Hoe component “table” gebruiken als data-tabel
- Bij het weergeven van logisch gestructureerde informatie
- Bij het weergeven van “key-value pairs”.
- Wanneer je wel headers kan toekennen.
- Wanneer er geen interactieve elementen zijn om de tabel aan te passen.
- Een data tabel is daarmee een statische weergave van informatie.
- Opbouw van data tabel is met native HTML
<table>tag - Gebruik
<th scope="col">voor koptitels in de kolommen. - Gebruik
<th scope="row">voor koptitels in de rijen.
Wanneer gebruik je het component “table” niet
Maak geen layout-tabel
Gebruik een <table> nooit om inhoud op een pagina op te maken. Dit is ook wel bekend als een layout-tabel. Gebruik in plaats daarvan het responsive grid-systeem om inhoud op een pagina op te maken.
Zie ook: de layout documentatie
Maak geen definition lists met “table”
- Definition lists worden ook gebruikt om logisch gestructureerde data te tonen. Definition lists worden onder andere gebruikt bij het tonen van meta data.
- Gebruik een definition list als je geen koptitel als header boven de kolom kan plaatsen.
- Gebruik een
<table>als je wel een koptitel boven de kolommen kunt plaatsen. De kolom kun je als een groep met een koptitel beschouwen.
Zie ook: Definition List
Hoe component “table” te gebruiken als data-grid
Een data grid is een dynamischere weergave van informatie. Het bevat wel interactieve elementen om de tabel aan te passen.
- Opbouw van data grid is met native HTML
<table>tag én ARIA tablerole="grid" - Gebruik
<th>om koptitels in header te definiëren. - Specifieke keyboard interacties moeten verder worden toegevoegd voor interactieve elementen.
Sorteren in een data-grid
- Bij het gebruik van
role="grid"wordt vanuit gegaan dat de data in het data-grid aanpasbaar is. Voegaria-readonly="true"toe, als de data niet aanpasbaar is. - Als je een kolom sorteerbaar wilt maken, voeg dan aan
<th>"role=columnheader"toe. - Als je een rij sorteerbaar wilt maken, voeg dan aan
<th>"role=rowheader"toe.
- Als je een rij sorteerbaar wilt maken, voeg dan aan
- Wanneer de sortering oplopend is, geef dit bij
<th>aan metaria-sort="ascending". Bij aflopende resultaten, gebruikaria-sort="descending". - Als er meerdere sorteerbare kolommen of rijen zijn, dan mag er alleen één sortering tegelijk actief zijn met
aria-sort.
Bootstrap “table”
Het <table> component is gebasseerd op Bootstrap’s Table.
Met de volgende uitzonderingen is de markup identiek aan Bootstrap:
Er is geen .table-bordered variant.
Er is geen tr.primary en tr.secondary.
Er is geen .table-responsive functionaliteit.
Zie Bootstrap Table.
Gedrag en toegankelijkheid
- Een tabel heeft altijd een
<caption>nodig. De caption wordt als een titel opgelezen door een screen reader. Indien deze visueel niet wenselijk is wordt deze verborgen met.sr-only. - Houd de tabel zo eenvoudig mogelijk. Dit verhoogt de begrijpelijkheid van de tabel voor eindgebruikers.
- Zorg ervoor dat er maximaal één kop niveau is voor de kolommen en maximaal één kop niveau voor de rijen. Screen readers hebben vaak moeite om goed meerdere kop niveaus op te lezen.
- Gebruik
<th scope="col">voor koptitels in de kolommen. - Gebruik
<th scope="row">voor koptitels in de rijen. - Splits de table in twee losse tables als er twee kop niveaus nodig zijn.
Bronvermelding
<table class="table table-hover">
<caption class="sr-only">Overzicht van gebruikersnamen</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Voornaam</th>
<th scope="col">Achternaam</th>
<th scope="col">GitHub gebruikersnaam</th>
<th scope="col">Modifier</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><a href="#fabien">Fabien</a></td>
<td>Potencier</td>
<td>fabpot</td>
<td>
<code>tr</code>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td><a href="#andrew">Andrew</a></td>
<td>Nesbitt</td>
<td>andrew</td>
<td>
<code>tr</code>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td><a href="#taylor">Taylor</a></td>
<td>Otwell</td>
<td>taylorotwell</td>
<td>
<code>tr</code>
</td>
</tr>
<tr class="active">
<th scope="row">4</th>
<td><a href="#hugo">Hugo</a></td>
<td>Giraudel</td>
<td>HugoGiraudel</td>
<td>
<code>tr.active</code>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td><a href="#thibault">Thibault</a></td>
<td>Duplessis</td>
<td>ornicar</td>
<td>
<code>tr</code>
</td>
</tr>
<tr class="success">
<th scope="row">6</th>
<td><a href="#juho">Juho</a></td>
<td>Vepsäläinen</td>
<td>bebraw</td>
<td>
<code>tr.success</code>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td><a href="#alex">Alex</a></td>
<td>Crichton</td>
<td>alexcrichton</td>
<td>
<code>tr</code>
</td>
</tr>
<tr>
<th scope="row">8</th>
<td><a href="#josh">Josh</a></td>
<td>Abernathy</td>
<td>joshaber</td>
<td>
<code>tr</code>
</td>
</tr>
<tr class="info">
<th scope="row">9</th>
<td><a href="#mike">Mike</a></td>
<td>McNeil</td>
<td>mikermcneil</td>
<td>
<code>tr.info</code>
</td>
</tr>
<tr>
<th scope="row">10</th>
<td><a href="#ben">Ben</a></td>
<td>Balter</td>
<td>benbalter</td>
<td>
<code>tr</code>
</td>
</tr>
<tr>
<th scope="row">11</th>
<td><a href="#brandon">Brandon</a></td>
<td>Keepers</td>
<td>bkeepers</td>
<td>
<code>tr</code>
</td>
</tr>
<tr class="warning">
<th scope="row">12</th>
<td><a href="#brent">Brent</a></td>
<td>Jackson</td>
<td>jxnblk</td>
<td>
<code>tr.warning</code>
</td>
</tr>
<tr>
<th scope="row">13</th>
<td><a href="#yegor">Yegor</a></td>
<td>Bugayenko</td>
<td>yegor256</td>
<td>
<code>tr</code>
</td>
</tr>
<tr>
<th scope="row">14</th>
<td><a href="#kenneth">Kenneth</a></td>
<td>Reitz</td>
<td>kennethreitz</td>
<td>
<code>tr</code>
</td>
</tr>
<tr class="danger">
<th scope="row">15</th>
<td><a href="#graham">Graham</a></td>
<td>Campbell</td>
<td>GrahamCampbell</td>
<td>
<code>tr.danger</code>
</td>
</tr>
<tr>
<th scope="row">16</th>
<td><a href="#kamran">Kamran</a></td>
<td>Ahmed</td>
<td>kamranahmedse</td>
<td>
<code>tr</code>
</td>
</tr>
<tr>
<th scope="row">17</th>
<td><a href="#katrina">Katrina</a></td>
<td>Owen</td>
<td>kytrinyx</td>
<td>
<code>tr</code>
</td>
</tr>
</tbody>
</table>
| # | Voornaam | Achternaam | GitHub gebruikersnaam | Modifier |
|---|---|---|---|---|
| 1 | Fabien | Potencier | fabpot |
tr
|
| 2 | Andrew | Nesbitt | andrew |
tr
|
| 3 | Taylor | Otwell | taylorotwell |
tr
|
| 4 | Hugo | Giraudel | HugoGiraudel |
tr.active
|
| 5 | Thibault | Duplessis | ornicar |
tr
|
| 6 | Juho | Vepsäläinen | bebraw |
tr.success
|
| 7 | Alex | Crichton | alexcrichton |
tr
|
| 8 | Josh | Abernathy | joshaber |
tr
|
| 9 | Mike | McNeil | mikermcneil |
tr.info
|
| 10 | Ben | Balter | benbalter |
tr
|
| 11 | Brandon | Keepers | bkeepers |
tr
|
| 12 | Brent | Jackson | jxnblk |
tr.warning
|
| 13 | Yegor | Bugayenko | yegor256 |
tr
|
| 14 | Kenneth | Reitz | kennethreitz |
tr
|
| 15 | Graham | Campbell | GrahamCampbell |
tr.danger
|
| 16 | Kamran | Ahmed | kamranahmedse |
tr
|
| 17 | Katrina | Owen | kytrinyx |
tr
|
modifier: table table-hover
caption: Overzicht van gebruikersnamen