<table class="table">
    <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
caption: Overzicht van gebruikersnamen

Het tabel 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.

Een <caption> moet altijd worden geplaatst. Indien deze visueel niet wenselijk is wordt deze verborgen met .sr-only.

Zie Bootstrap Table.