Foehn Design System

Table 

<div class="table-responsive">
    <table class="table">
        <caption>A caption functions like a heading for a table</caption>
        <thead>
            <tr>
                <th>Données géographiques </th>
                <th>Léman</th>
                <th>Neuchâtel</th>
                <th>Morat</th>
                <th>Joux</th>
                <th>Brenet</th>
                <th>Brêt</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Altitude</th>
                <td>372 m</td>
                <td>429 m</td>
                <td>429 m</td>
                <td>1004 m</td>
                <td>1002 m</td>
                <td>673 m</td>
            </tr>
            <tr>
                <th scope="row">Profondeur maximum</th>
                <td>310 m</td>
                <td>153 m</td>
                <td>45 m</td>
                <td>33 m</td>
                <td>18 m</td>
                <td>20 m</td>
            </tr>
            <tr>
                <th scope="row">Rives</th>
                <td>200 km</td>
                <td>84 km</td>
                <td>21 km</td>
                <td>21 km</td>
                <td>4 km</td>
                <td>4 km</td>
            </tr>
            <tr>
                <th scope="row">Superficie</th>

                <td>580 km<sup>2</sup></td>
                <td>215 km<sup>2</sup></td>
                <td>23 km<sup>2</sup></td>
                <td>9 km<sup>2</sup></td>
                <td>0.7 km<sup>2</sup></td>
                <td>0.5 km<sup>2</sup></td>
            </tr>
            <tr>
                <th scope="row">Volume (m<sup>3</sup>)</th>

                <td>89 milliards</td>
                <td>13.8 milliards</td>
                <td>0.55 milliard</td>
                <td>132 millions</td>
                <td>5 millions</td>
                <td>4.5 millions</td>
            </tr>
            <tr>
                <th scope="row">Temps moyen pendant lequel l'eau séjourne dans le lac</th>
                <td>12 ans</td>
                <td>8.2 ans</td>
                <td>1.6 ans</td>
                <td>0.85 an</td>
                <td>0.3 an</td>
                <td>1 an</td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="table-responsive">
  <table class="table">
    <caption>{{ caption }}</caption>
    <thead>
      <tr>
        <th>Données géographiques </th>
        <th>Léman</th>
        <th>Neuchâtel</th>
        <th>Morat</th>
        <th>Joux</th>
        <th>Brenet</th>
        <th>Brêt</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Altitude</th>
        <td>372 m</td>
        <td>429 m</td>
        <td>429 m</td>
        <td>1004 m</td>
        <td>1002 m</td>
        <td>673 m</td>
      </tr>
      <tr>
        <th scope="row">Profondeur maximum</th>
        <td>310 m</td>
        <td>153 m</td>
        <td>45 m</td>
        <td>33 m</td>
        <td>18 m</td>
        <td>20 m</td>
      </tr>
      <tr>
        <th scope="row">Rives</th>
        <td>200 km</td>
        <td>84 km</td>
        <td>21 km</td>
        <td>21 km</td>
        <td>4 km</td>
        <td>4 km</td>
      </tr>
      <tr>
        <th scope="row">Superficie</th>

        <td>580 km<sup>2</sup></td>
        <td>215 km<sup>2</sup></td>
        <td>23 km<sup>2</sup></td>
        <td>9 km<sup>2</sup></td>
        <td>0.7 km<sup>2</sup></td>
        <td>0.5 km<sup>2</sup></td>
      </tr>
      <tr>
        <th scope="row">Volume (m<sup>3</sup>)</th>

        <td>89 milliards</td>
        <td>13.8 milliards</td>
        <td>0.55 milliard</td>
        <td>132 millions</td>
        <td>5 millions</td>
        <td>4.5 millions</td>
      </tr>
      <tr>
        <th scope="row">Temps moyen pendant lequel l'eau séjourne dans le lac</th>
        <td>12 ans</td>
        <td>8.2 ans</td>
        <td>1.6 ans</td>
        <td>0.85 an</td>
        <td>0.3 an</td>
        <td>1 an</td>
      </tr>
    </tbody>
  </table>
</div>
 
{
  "caption": "A caption functions like a heading for a table"
}
  • Content: 
    @charset 'UTF-8';

.table {
  caption {
    caption-side: top;
  }

  td,
  th {
    border-top: 1px solid $vd-neutral-lighter;
    padding: 0.75rem;
  }

  thead th {
    border-bottom: 2px solid $vd-neutral-lighter;
    vertical-align: bottom;
  }
}
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: src/components/01-atoms/table/_table.scss
  • Size: 252 Bytes

Use the default Bootstrap classes on this component. Refer to the official doc for more fancy classes.

Caption & summary

Captions and summaries provide information that can help users find, navigate, and understand tables. While they are not required in every case to meet WCAG 2.0, captions and summaries are fairly straightforward ways to provide such information that is often needed.

  • A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it’s about and decide if they want to read it. If the user uses “Tables Mode”, captions are the primary mechanism to identify tables. The caption is provided by the element.
  • A summary conveys information about the organization of the data in a table and helps users navigate it. For example, if a table has an unusual structure (as in the examples below), information about what content can be found in which row or column can be provided to the user. A summary is usually only needed for complex tables.

If both caption and summary are provided for one table, the summary should not duplicate information present in the caption.

https://www.w3.org/WAI/tutorials/tables/caption-summary/