<table class="table table-striped">
<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>
<table{{#if modifier}} class="{{ modifier }}"{{/if}}>
<caption {{#unless showCaption }}class="sr-only"{{/unless}}>{{ caption }}</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>
modifier: table table-striped
caption: Overzicht van gebruikersnamen
Het tabel component is gebasseerd op Bootstrap’s Table.
Met de volgende uitzonderingen is de markup identiek aan Bootstrap:
.table-bordered
variant.tr.primary
en tr.secondary
..table-responsive
functionaliteit.Een <caption>
moet altijd worden geplaatst. Indien deze visueel niet wenselijk is wordt deze verborgen met .sr-only
.
Zie Bootstrap Table.