DSO Component Library

# Table: Striped

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <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">Gebruikersnaam</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>

`
`

    <table class="table {{ modifier }}">
      <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">Gebruikersnaam</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

`
`

    caption: Overzicht van gebruikersnamen
    modifier: table-striped

`

- Handle: @table--striped
- Variants (6): Default , Caption , Striped , Bordered , Hovered , Condensed
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\02-content\table\table.hbs

There are no notes for this item.

### 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">Gebruikersnaam</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</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">Gebruikersnaam</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>`

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

Check that the title element describes the document.

`<title>Table`