Tabel basisweergave

Introductie

Een basisweergave van een tabel in HTML bestaat uit een <table> met rijen <tr>, kopcellen <th> en gewone cellen <td> om gegevens overzichtelijk in kolommen en rijen te tonen.

Snelstart

SCSS importeren:

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

Aandachtspunten: Om tabellen correct weer te geven op smallere schermresoluties, denk hierbij aan mobiele apparaten, dient er een div om de table te staan met de class horizontal-scroll.

Voorbeelden

Voorbeeld: Basis

Basisvoorbeeld tabel:
Kolom 1Kolom 2Kolom 3
LoremIpsumDolor sit amet
LoremIpsumDolor sit amet
LoremIpsumDolor sit amet
LoremIpsumDolor sit amet
    
    <div class="horizontal-scroll">
  <table>
    <caption>
      Basisvoorbeeld tabel:
    </caption>
    <thead>
      <tr>
        <th scope="col">Kolom 1</th>
        <th scope="col">Kolom 2</th>
        <th scope="col">Kolom 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
    </tbody>
  </table>
</div>

Voorbeeld: Tabel met footer

Tabelvoorbeeld met footer:
Kolom 1Kolom 2Kolom 3
LoremIpsumDolor sit amet
LoremIpsumDolor sit amet
LoremIpsumDolor sit amet
Table footer heading 1Table footer heading 2Table footer heading 3
Table footer 1Table footer 2Table footer 3
    
    <div class="horizontal-scroll">
  <table>
    <caption>
      Tabelvoorbeeld met footer:
    </caption>
    <thead>
      <tr>
        <th scope="col">Kolom 1</th>
        <th scope="col">Kolom 2</th>
        <th scope="col">Kolom 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Table footer heading 1</th>
        <th>Table footer heading 2</th>
        <th>Table footer heading 3</th>
      </tr>
      <tr>
        <td>Table footer 1</td>
        <td>Table footer 2</td>
        <td>Table footer 3</td>
      </tr>
    </tfoot>
  </table>
</div>

Om de gebruiker te informeren over de inhoud van de tabel, is het aan te raden om een titel toe te voegen met daarin de omschrijving van de tabel. Voeg direct binnen de table een caption toe om de titel toe te voegen.

Voorbeeld: Tabel met rij-headers

Basisvoorbeeld tabel met rij-headers:
Kolom 1Kolom 2Kolom 3
Rij 1Lorem ipsumDolor sit amet
Rij 2Lorem ipsumDolor sit amet
Rij 3Lorem ipsumDolor sit amet
Rij 4Lorem ipsumDolor sit amet
    
    <div class="horizontal-scroll">
  <table>
    <caption>
      Basisvoorbeeld tabel:
    </caption>
    <thead>
      <tr>
        <th scope="col">Kolom 1</th>
        <th scope="col">Kolom 2</th>
        <th scope="col">Kolom 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit amet</td>
      </tr>
    </tbody>
  </table>
</div>