Tabel met numerieke data

Introductie

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

Snelstart

SCSS importeren:

    
      
    
    @use "@minvws/manon/components/table";
  

Benodigde stappen

1. 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

Voorbeelden

    
      
    
    <div class="horizontal-scroll">
  <table>
    <caption>
      Tabelvoorbeeld met numerieke data:
    </caption>
    <thead>
      <tr>
        <th scope="col">Table header heading</th>
        <th scope="col" class="number">Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td class="number">52,12</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td class="number">110,00</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td class="number">2,00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Totaal</td>
        <td class="number">164,12</td>
      </tr>
    </tfoot>
  </table>
</div>