Tabel met numerieke data

Getallen worden visueel onderscheidend weergegeven van overige celdata om de gebruiksvriendelijkheid te vergroten.

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. Om gebruik te maken van de weergave voor numerieke data, voeg de class number toe aan de cellen die numerieke data bevatten en de bijbehorende titelblokken

Aandachtspunten

• Getallen worden vaak rechts uitgelijnd voor leesbaarheid.
• Voor consistentie wordt de titel van kolommen met numerieke data vaak op dezelfde manier uitgelijnd.
• Getallen worden mono-spaced weergegeven, wat inhoud dat ieder getal dezelfde breedte heeft waardoor getallen onderling goed te vergelijken zijn.

Voorbeelden

Visueel voorbeeld:

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met selectievak:</caption>
    <thead>
      <tr>
        <th scope="col"><input type="checkbox"></th>
        <th scope="col">Table header heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>Ipsum</td>
      </tr>
    </tbody>
  </table>
</div>

Benodigdheden

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

Gerelateerde pagina's