DSO Component Library

Table: With caption 

<table class="table">
    <caption>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>Fabien</td>
            <td>Potencier</td>
            <td>fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Andrew</td>
            <td>Nesbitt</td>
            <td>andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Taylor</td>
            <td>Otwell</td>
            <td>taylorotwell</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr class="active">
            <th scope="row">4</th>
            <td>Hugo</td>
            <td>Giraudel</td>
            <td>HugoGiraudel</td>
            <td>
                <code>tr.active</code>
            </td>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Thibault</td>
            <td>Duplessis</td>
            <td>ornicar</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr class="success">
            <th scope="row">6</th>
            <td>Juho</td>
            <td>Vepsäläinen</td>
            <td>bebraw</td>
            <td>
                <code>tr.success</code>
            </td>
        </tr>
        <tr>
            <th scope="row">7</th>
            <td>Alex</td>
            <td>Crichton</td>
            <td>alexcrichton</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td>Josh</td>
            <td>Abernathy</td>
            <td>joshaber</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr class="info">
            <th scope="row">9</th>
            <td>Mike</td>
            <td>McNeil</td>
            <td>mikermcneil</td>
            <td>
                <code>tr.info</code>
            </td>
        </tr>
        <tr>
            <th scope="row">10</th>
            <td>Ben</td>
            <td>Balter</td>
            <td>benbalter</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">11</th>
            <td>Brandon</td>
            <td>Keepers</td>
            <td>bkeepers</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr class="warning">
            <th scope="row">12</th>
            <td>Brent</td>
            <td>Jackson</td>
            <td>jxnblk</td>
            <td>
                <code>tr.warning</code>
            </td>
        </tr>
        <tr>
            <th scope="row">13</th>
            <td>Yegor</td>
            <td>Bugayenko</td>
            <td>yegor256</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">14</th>
            <td>Kenneth</td>
            <td>Reitz</td>
            <td>kennethreitz</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr class="danger">
            <th scope="row">15</th>
            <td>Graham</td>
            <td>Campbell</td>
            <td>GrahamCampbell</td>
            <td>
                <code>tr.danger</code>
            </td>
        </tr>
        <tr>
            <th scope="row">16</th>
            <td>Kamran</td>
            <td>Ahmed</td>
            <td>kamranahmedse</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">17</th>
            <td>Katrina</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>Fabien</td>
      <td>Potencier</td>
      <td>fabpot</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andrew</td>
      <td>Nesbitt</td>
      <td>andrew</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Taylor</td>
      <td>Otwell</td>
      <td>taylorotwell</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr class="active">
      <th scope="row">4</th>
      <td>Hugo</td>
      <td>Giraudel</td>
      <td>HugoGiraudel</td>
      <td>
        <code>tr.active</code>
      </td>
    </tr>
    <tr>
      <th scope="row">5</th>
      <td>Thibault</td>
      <td>Duplessis</td>
      <td>ornicar</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr class="success">
      <th scope="row">6</th>
      <td>Juho</td>
      <td>Vepsäläinen</td>
      <td>bebraw</td>
      <td>
        <code>tr.success</code>
      </td>
    </tr>
    <tr>
      <th scope="row">7</th>
      <td>Alex</td>
      <td>Crichton</td>
      <td>alexcrichton</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>Josh</td>
      <td>Abernathy</td>
      <td>joshaber</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr class="info">
      <th scope="row">9</th>
      <td>Mike</td>
      <td>McNeil</td>
      <td>mikermcneil</td>
      <td>
        <code>tr.info</code>
      </td>
    </tr>
    <tr>
      <th scope="row">10</th>
      <td>Ben</td>
      <td>Balter</td>
      <td>benbalter</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr>
      <th scope="row">11</th>
      <td>Brandon</td>
      <td>Keepers</td>
      <td>bkeepers</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr class="warning">
      <th scope="row">12</th>
      <td>Brent</td>
      <td>Jackson</td>
      <td>jxnblk</td>
      <td>
        <code>tr.warning</code>
      </td>
    </tr>
    <tr>
      <th scope="row">13</th>
      <td>Yegor</td>
      <td>Bugayenko</td>
      <td>yegor256</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr>
      <th scope="row">14</th>
      <td>Kenneth</td>
      <td>Reitz</td>
      <td>kennethreitz</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr class="danger">
      <th scope="row">15</th>
      <td>Graham</td>
      <td>Campbell</td>
      <td>GrahamCampbell</td>
      <td>
        <code>tr.danger</code>
      </td>
    </tr>
    <tr>
      <th scope="row">16</th>
      <td>Kamran</td>
      <td>Ahmed</td>
      <td>kamranahmedse</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
    <tr>
      <th scope="row">17</th>
      <td>Katrina</td>
      <td>Owen</td>
      <td>kytrinyx</td>
      <td>
        <code>tr</code>
      </td>
    </tr>
  </tbody>
</table>
 
modifier: table
caption: Overzicht van gebruikersnamen
showCaption: true

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.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<caption class="sr-only">Overzicht van gebruikersnamen</caption>

NOTICE: WCAG2AA.Principle1.Guideline1_3.1_3_1.DataTable

This table appears to be a data table. If it is meant to instead be a layout table, ensure there are no th elements, and no summary or caption.

<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>Fabien</td> <td>Potencier</td> <td>fabpot</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">2</th> <td>Andrew</td> <td>Nesbitt</td> <td>andrew</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">3</th> <td>Taylor</td> <td>Otwell</td> <td>taylorotwell</td> <td> <code>tr</code> </td> </tr> <tr class="active"> <th scope="row">4</th> <td>Hugo</td> <td>Giraudel</td> <td>HugoGiraudel</td> <td> <code>tr.active</code> </td> </tr> <tr> <th scope="row">5</th> <td>Thibault</td> <td>Duplessis</td> <td>ornicar</td> <td> <code>tr</code> </td> </tr> <tr class="success"> <th scope="row">6</th> <td>Juho</td> <td>Vepsäläinen</td> <td>bebraw</td> <td> <code>tr.success</code> </td> </tr> <tr> <th scope="row">7</th> <td>Alex</td> <td>Crichton</td> <td>alexcrichton</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">8</th> <td>Josh</td> <td>Abernathy</td> <td>joshaber</td> <td> <code>tr</code> </td> </tr> <tr class="info"> <th scope="row">9</th> <td>Mike</td> <td>McNeil</td> <td>mikermcneil</td> <td> <code>tr.info</code> </td> </tr> <tr> <th scope="row">10</th> <td>Ben</td> <td>Balter</td> <td>benbalter</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">11</th> <td>Brandon</td> <td>Keepers</td> <td>bkeepers</td> <td> <code>tr</code> </td> </tr> <tr class="warning"> <th scope="row">12</th> <td>Brent</td> <td>Jackson</td> <td>jxnblk</td> <td> <code>tr.warning</code> </td> </tr> <tr> <th scope="row">13</th> <td>Yegor</td> <td>Bugayenko</td> <td>yegor256</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">14</th> <td>Kenneth</td> <td>Reitz</td> <td>kennethreitz</td> <td> <code>tr</code> </td> </tr> <tr class="danger"> <th scope="row">15</th> <td>Graham</td> <td>Campbell</td> <td>GrahamCampbell</td> <td> <code>tr.danger</code> </td> </tr> <tr> <th scope="row">16</th> <td>Kamran</td> <td>Ahmed</td> <td>kamranahmedse</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">17</th> <td>Katrina</td> <td>Owen</td> <td>kytrinyx</td> <td> <code>tr</code> </td> </tr> </tbody> </table>

NOTICE: WCAG2AA.Principle1.Guideline1_3.1_3_1.H39.3.Check

If this table is a data table, check that the caption element accurately describes this table.

<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>Fabien</td> <td>Potencier</td> <td>fabpot</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">2</th> <td>Andrew</td> <td>Nesbitt</td> <td>andrew</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">3</th> <td>Taylor</td> <td>Otwell</td> <td>taylorotwell</td> <td> <code>tr</code> </td> </tr> <tr class="active"> <th scope="row">4</th> <td>Hugo</td> <td>Giraudel</td> <td>HugoGiraudel</td> <td> <code>tr.active</code> </td> </tr> <tr> <th scope="row">5</th> <td>Thibault</td> <td>Duplessis</td> <td>ornicar</td> <td> <code>tr</code> </td> </tr> <tr class="success"> <th scope="row">6</th> <td>Juho</td> <td>Vepsäläinen</td> <td>bebraw</td> <td> <code>tr.success</code> </td> </tr> <tr> <th scope="row">7</th> <td>Alex</td> <td>Crichton</td> <td>alexcrichton</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">8</th> <td>Josh</td> <td>Abernathy</td> <td>joshaber</td> <td> <code>tr</code> </td> </tr> <tr class="info"> <th scope="row">9</th> <td>Mike</td> <td>McNeil</td> <td>mikermcneil</td> <td> <code>tr.info</code> </td> </tr> <tr> <th scope="row">10</th> <td>Ben</td> <td>Balter</td> <td>benbalter</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">11</th> <td>Brandon</td> <td>Keepers</td> <td>bkeepers</td> <td> <code>tr</code> </td> </tr> <tr class="warning"> <th scope="row">12</th> <td>Brent</td> <td>Jackson</td> <td>jxnblk</td> <td> <code>tr.warning</code> </td> </tr> <tr> <th scope="row">13</th> <td>Yegor</td> <td>Bugayenko</td> <td>yegor256</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">14</th> <td>Kenneth</td> <td>Reitz</td> <td>kennethreitz</td> <td> <code>tr</code> </td> </tr> <tr class="danger"> <th scope="row">15</th> <td>Graham</td> <td>Campbell</td> <td>GrahamCampbell</td> <td> <code>tr.danger</code> </td> </tr> <tr> <th scope="row">16</th> <td>Kamran</td> <td>Ahmed</td> <td>kamranahmedse</td> <td> <code>tr</code> </td> </tr> <tr> <th scope="row">17</th> <td>Katrina</td> <td>Owen</td> <td>kytrinyx</td> <td> <code>tr</code> </td> </tr> </tbody> </table>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Default