VGR Styleguide

Tables: Zebra 

<table class="vgr-table vgr-table--zebra">
    <caption>Barninfektioner och vaccinationer</caption>
    <thead>
        <tr>
            <th scope="col">Diagnos</th>
            <th scope="col">2011</th>
            <th scope="col">2012</th>
            <th scope="col">2013</th>
            <th scope="col">2014</th>
            <th scope="col">2015</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Difteri</th>
            <td>0</td>
            <td>2</td>
            <td>0</td>
            <td>2</td>
            <td>4</td>
        </tr>
        <tr>
            <th scope="row">Grupp A streptokocker (IGAS) invasiva</th>
            <td>65</td>
            <td>86</td>
            <td>119</td>
            <td>100</td>
            <td>89</td>
        </tr>
        <tr>
            <th scope="row">Haemophilus influenzae B invasiv</th>
            <td>42</td>
            <td>24</td>
            <td>34</td>
            <td>24</td>
            <td>47</td>
        </tr>
        <tr>
            <th scope="row">Kikhosta</th>
            <td>15</td>
            <td>38</td>
            <td>29</td>
            <td>65</td>
            <td>91</td>
        </tr>
        <tr>
            <th scope="row">Meningokockinfektion</th>
            <td>6</td>
            <td>19</td>
            <td>13</td>
            <td>10</td>
            <td>4</td>
        </tr>
        <tr>
            <th scope="row">Mässling</th>
            <td>4</td>
            <td>2</td>
            <td>4</td>
            <td>3</td>
            <td>2</td>
        </tr>
        <tr>
            <th scope="row">Pneumokocker invasiv</th>
            <td>208</td>
            <td>198</td>
            <td>198</td>
            <td>171</td>
            <td>193</td>
        </tr>
        <tr>
            <th scope="row">Påssjuka</th>
            <td>6</td>
            <td>11</td>
            <td>3</td>
            <td>3</td>
            <td>7</td>
        </tr>
    </tbody>
</table>
 
<table class="vgr-table vgr-table--{{ modifier }}">
  <caption>Barninfektioner och vaccinationer</caption>
  <thead>
    <tr>
      <th scope="col">Diagnos</th>
      <th scope="col">2011</th>
      <th scope="col">2012</th>
      <th scope="col">2013</th>
      <th scope="col">2014</th>
      <th scope="col">2015</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Difteri</th>
      <td>0</td>
      <td>2</td>
      <td>0</td>
      <td>2</td>
      <td>4</td>
    </tr>
    <tr>
      <th scope="row">Grupp A streptokocker (IGAS) invasiva</th>
      <td>65</td>
      <td>86</td>
      <td>119</td>
      <td>100</td>
      <td>89</td>
    </tr>
    <tr>
      <th scope="row">Haemophilus influenzae B invasiv</th>
      <td>42</td>
      <td>24</td>
      <td>34</td>
      <td>24</td>
      <td>47</td>
    </tr>
    <tr>
      <th scope="row">Kikhosta</th>
      <td>15</td>
      <td>38</td>
      <td>29</td>
      <td>65</td>
      <td>91</td>
    </tr>
    <tr>
      <th scope="row">Meningokockinfektion</th>
      <td>6</td>
      <td>19</td>
      <td>13</td>
      <td>10</td>
      <td>4</td>
    </tr>
    <tr>
      <th scope="row">Mässling</th>
      <td>4</td>
      <td>2</td>
      <td>4</td>
      <td>3</td>
      <td>2</td>
    </tr>
    <tr>
      <th scope="row">Pneumokocker invasiv</th>
      <td>208</td>
      <td>198</td>
      <td>198</td>
      <td>171</td>
      <td>193</td>
    </tr>
    <tr>
      <th scope="row">Påssjuka</th>
      <td>6</td>
      <td>11</td>
      <td>3</td>
      <td>3</td>
      <td>7</td>
    </tr>
  </tbody>
</table>
 
{
  "modifier": "zebra"
}

Text from The U.S. Web Design Standards

Accessibility

  • Simple tables can have two levels of headers. Each header cell should have scope="col" or scope="row".
  • Complex tables are tables with more than two levels of headers. Each header should be given a unique id and each data cell should have a headers attribute with each related header cell’s id listed.
  • When adding a title to a table, include it in a <caption> tag inside of the <table> element.

Usability

When to use

  • When you need tabular information, such as statistical data.

When to consider something else

  • Depending on the type of content, consider using other presentation formats such as definition lists or hierarchical lists.

Guidance

  • Tables are great at displaying tabular data. Minimal visual styling helps surface this information more easily.