Tabelrichting

Data in tabellen kan als rij of als kolom weergegeven worden.

Benodigde stappen:

1. Voeg scope="col" of scope="row" toe aan de tabelcellen th of td. Afhankelijk van de richting. Voor meer informatie zie: Voorbeelden.

Aandachtspunten

• Het is hierbij belangrijk om rekening te houden met gebruikers die gebruik maken van hulptechnologieën zoals screenreaders. Om ook voor hen inzichtelijk te houden bij welke data de titel hoort is het van belang dit aan te geven. Dit kan gedaan worden door aan de <th> de tag scope="col" bij kolommen of scope="row" bij rijen toe te voegen.

Voorbeelden

Visueel voorbeeld:

In dit voorbeeld staat dat de <th> binnen de <thead> over de data in de kolommen gaan. En de <th> binnen de <tbody> over de data per rij gaan.

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met aangegeven scope:</caption>
    <thead>
      <tr>
        <th scope="col">Naam</th>
        <th scope="col">Diersoort</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Manon</th>
        <td>Kat</td>
      </tr>
      <tr>
        <th scope="row">Max</th>
        <td>Hond</td>
      </tr>
      <tr>
        <th scope="row">Keiko</th>
        <td>Kat</td>
      </tr>
    </tbody>
  </table>
</div>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/table";

Instelbare variabelen

Dit component heeft momenteel geen instelbare variabelen

Gerelateerde pagina's