Samenvattingstabel

Geschikt voor het tonen van korte overzichten en samenvattingen bij complexe tabellen en documenten.

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Benodigdheden. Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
  2. Voeg de class summary toe aan de <table> om gebruik te maken van deze tabelweergave.
  3. De tabel zal zo smal weergegeven worden met een rustigere grafische weergave. Stijlkeuzes kunnen overschreven worden binnen het variabelen bestand. Voor meer informatie zie: Benodigdheden en Instelbare variabelen

Voorbeelden

Tabel

Visueel voorbeeld:

Samenvatting overzicht lorem ipsum:
Risicolevel Hoeveelheid
Critical 1
Hoog 1
Gemiddeld 3
Laag 6
Aanbeveling 10
Totaal 21

HTML-voorbeeld:

<table class="summary">
  <caption>Samenvatting overzicht lorem ipsum:</caption>
  <thead>
    <tr>
      <th scope="col">Risicolevel</th>
      <th scope="col">Hoeveelheid</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="critical">Critical</span></td>
      <td class="number">1</td>
    </tr>

    <tr>
      <td><span class="high">Hoog</span></td>
      <td class="number">1</td>
    </tr>

    <tr>
      <td><span class="medium">Gemiddeld</span></td>
      <td class="number">3</td>
    </tr>

    <tr>
      <td><span class="low">Laag</span></td>
      <td class="number">6</td>
    </tr>

    <tr>
      <td><span class="recommendation">Aanbeveling</span></td>
      <td class="number">10</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Totaal</td>
      <td class="number">21</td>
    </tr>
  </tfoot>
</table>

Horizontaal scrollbare tabel

Aandachtspunten:

  • Plaats de class summary op de omliggende div. Voorbeeld: <div class="horizontal-scroll summary">.
<div class="horizontal-scroll summary">
  <table>
    <caption>Samenvatting overzicht lorem ipsum:</caption>
    <thead>
      <tr>
        <th scope="col">Risicolevel</th>
        <th scope="col">Hoeveelheid</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="critical">Critical</span></td>
        <td class="number">1</td>
      </tr>

      <tr>
        <td><span class="high">Hoog</span></td>
        <td class="number">1</td>
      </tr>

      <tr>
        <td><span class="medium">Gemiddeld</span></td>
        <td class="number">3</td>
      </tr>

      <tr>
        <td><span class="low">Laag</span></td>
        <td class="number">6</td>
      </tr>

      <tr>
        <td><span class="recommendation">Aanbeveling</span></td>
        <td class="number">10</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Totaal</td>
        <td class="number">21</td>
      </tr>
    </tfoot>
  </table>
</div>

Benodigdheden

  • table/table-base.scss
  • table/table-base-variables.scss

Instelbare variabelen

Dit component heeft momenteel geen instelbare variabelen