Tabellen

Om data efficient en gebruiksvriendelijk weer te geven kan gebruik gemaakt worden van tabellen.

Aandachtspunten:

Bruikbaarheid

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

Gebruiksvriendelijkheid

• Tabellen maken gebuik van om en om achtergrondkleur voor leesbaarheid.
• De standaard weergave van tabellen heeft voldoende witruimte voor leesbaarheid. Voor grote complexe datasets kan er met het oog op gebruiksvriendelijkheid ook gekozen worden voor een gecomprimeerde versie van de tabel waarbij de content compacter wordt weergegeven. Dit kan de gebruiker helpen om meer overzicht te behouden. Zie Tabel - Gecomprimeerde weergave voor meer informatie en voorbeelden.

Toegankelijkheid

Houd rekening met gebruikers met een beperking. Denk bijvoorbeeld aan mensen die blind of slechtziend of kleurenblind; doof of slechthorend; motorisch beperkt of zwakbegaafd; autistisch; of laaggeletterd zijn. Het kan belangrijk zijn extra elementen mee te geven aan de code zodat ook voor hen de tabellen prettig te gebruiken zijn.

• Voeg een <caption> toe aan de tabel met daarbinnen de omschrijving van de content van de tabel. Gebruikers die gebruik maken van screenreaders en andere technische hulpmiddelen om de content voor te lezen, kunnen aan de hand van de tabelomschrijving bepalen of de inhoud van de tabelvoor hen relevant is of beter overgeslagen kan worden. Voor meer informatie zie: Titel.
• Geef aan of de titel <th> bij een kolom scope="col" of een rij scope="row" hoort. Screenreaders gebruiken deze informatie om de gebruiker opties tot navigeren te geven. Daarnaast geven ze de gebruiker inzicht in de relatie van de data t.o.v de tabeltitels. Voor meer informatie zie: Tabelrichting

Waarschuwing:Let op: Overheids websites zijn verplicht om aan toegankelijkkheidsstandaarden te voldoen. Voor meer informatie zie: https://www.digitoegankelijk.nl/

Beschikbare voorbeelden:

Basisvoorbeeld tabel

Het basisvoorbeeld bevat de basiselementen voor een nette, gebruiksvriendelijke en toegankelijke tabel.

Voorbeeld

visueel voorbeeld:

Html-voorbeeld:

                
<div class="horizontal-scroll">
  <table>
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>
                
              

Tabel met footer

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.

Visueel voorbeeld:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table>
    <caption>Table with titlebar and title example:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</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>
              
            

Tabelcontent

Een overzicht met elementen die gebruikt kunnen worden binnen tabellen.

Beschikbare voorbeelden:

Actieknoppen

Herhalende content zoals actieknoppen kunnen visueel als iconen weergegeven worden.

Aandachtspunten:

• Ga er niet vanuit dat de gebruiker weet wat het icoon betekend. Plaats de omschrijvende tekst in de header.
• Voor toegankelijkheid is het belangrijk om de tekst wel toe te voegen aan de button ook al wordt deze visueel niet getoont. Screenreaders maken hier bijvoorbeeld gebruik van.
• Voor tabellen met lange lijsten kan het de gebruiker helpen om gebruik te maken van de tabel met sticky header zodat de toelichting van de iconen altijd in beeld blijft. Voor meer informatie zie: tabel met sticky header.
• Om gebruik te maken van de visuele actieknop weergave, voeg de class action-button toe aan de button.
• Als alle knoppen binnen een tabel weergegeven mogen worden als actieknop kan er ook gebruik gemaakt worden van de class action-buttons direct op de <table>. Let op: Alle knoppen worden in dat geval weergegeven als actieknoppen.

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met gegroepeerde elementen:</caption>
    <thead>
      <tr>
        <th scope="col">Lorem</th>
        <th scope="col">Table header heading</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>
          <div>
            <form><button type="submit" class="icon icon-heart">Love</button></form>
            <form><input type="submit" value="Lorem"></form>
            <form><input type="submit" value="Lorem"></form>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Checkbox

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>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>Ipsum</td>
        <td><form><input type="submit" value="Lorem"></form></td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Gegroepeerde data binnen een cel

Sommige elementen zoals bijvoorbeeld actieknoppen bestaan visueel vaak enkel uit een icoon en kunnen om die reden prima naast elkaar op een regel weergegeven worden. Groepeer de elementen binnen een <div> ze op een regel te plaatsen

Visueel voorbeeld gegroepeerde elementen:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met gegroepeerde elementen:</caption>
    <thead>
      <tr>
        <th scope="col">Lorem</th>
        <th scope="col">Table header heading</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>
          <div>
            <form><button type="submit" class="icon icon-heart">Love</button></form>
            <form><input type="submit" value="Lorem"></form>
            <form><input type="submit" value="Lorem"></form>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Tabel - Meldingen

Tabelelementen kunnen een meldig weergeven. Denk hierbij aan een foutmelding of een toelichting.

Voeg een van de melding-classes toe aan een volledige tabelrij tr of aan een losse cel th / td. Beschikbare classes zijn:

• error
• warning
• confirmation
• explanation
• primary

Zie Notifications voor meer informatie.

Visueel voorbeeld:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld meldingen:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="error">Foutmelding op tabelrij</td>
        <td class="error">Foutmelding op tabelrij</td>
        <td class="error">Foutmelding op tabelrij</td>
      </tr>
      <tr>
        <td class="warning">Waarschuwing op tabelrij</td>
        <td class="warning">Waarschuwing op tabelrij</td>
        <td class="warning">Waarschuwing op tabelrij</td>
      </tr>
      <tr>
        <td class="confirmation">Bevestiging op tabelrij</td>
        <td class="confirmation">Bevestiging op tabelrij</td>
        <td class="confirmation">Bevestiging op tabelrij</td>
      </tr>
      <tr>
        <td class="explanation">Toelichting op tabelrij</td>
        <td class="explanation">Toelichting op tabelrij</td>
        <td class="explanation">Toelichting op tabelrij</td>
      </tr>
      <tr>
        <td class="primary">Primair op tabelrij</td>
        <td class="primary">Primair op tabelrij</td>
        <td class="primary">Primair op tabelrij</td>
      </tr>
    </tbody>
  </table>
</div>
                
              

Titel

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.

• Het toevoegen van een caption vergroot de gebruiksvriendelijkheid van de site.
  • Gebruik maken van een caption helpt gebruikers om snel te kunnen bepalen of de inhoud van de tabel interessant is voor hen.
  • Gebruikers die gebruik maken van screenreaders om de content voor te lezen, bijvoorbeeld bij blindheid, slecht- of bijziendheid, kunnen de tabelomschrijving gebruiken om te bepalen of ze de inhoud van de tabel volledig willen horen of overslaan.
• De caption dient direct binnen de table geplaatst te worden
• De caption dient de omschrijving te bevatten van de inhoud van de tabel

Voorbeeld

Visueel voorbeeld:

              
<div class="horizontal-scroll">
  <table>
    <caption>Basisvoorbeeld tabel:</caption>
    <!-- table content -->
  </table>
</div>
              
            

Numerieke data

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

• Getallen worden rechts uitgelijnd volgens conventie.
• De titel van kolommen met numerieke data worden op dezelfde manier uitgelijnd voor consistentie.
• Getallen worden mono-spaced weergegeven, wat inhoud dat ieder getal dezelfde breedte heeft waardoor getallen onderling goed te vergelijken zijn.
• 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

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>
              
            

Tabelopties

Een overzicht van opties die gebruikt kunnen worden om tabellen en hun data weer te geven.

Beschikbare voorbeelden:

Data over meerdere kolommen

Data weergeven over meer dan een kolom kan gebruikt worden binnen tabellen. Dit kan handig zijn om data gebruiksvriendelijker weer te geven.

• Om een datacel en/of een kolomtitel over meerdere kolommen te plaatsen gebruik een colspan="[number]" Bijvoorbeeld: colspan="2" op de td of de th, of op zowel de td als de th.
• Er kan ook gezozen worden om een enkele td bijvoorbeeld de volledig breedte van de tabel te geven door de colspan op de td overeen te laten komen met de hoeveelheid kolommen van de tabel. Zie bijgevoegd voorbeeld.
• Let op dat de colspan wel aangepast dient te worden als de hoeveelheid kolommen binnen de tabel aangepast worden. Het is daarom aan te raden deze methode spaarzaam en verstandig te gebruiken aangezien dit bij variabele data problemen op kan leveren.

Visueel voorbeeld:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met data over meerdere kolommen:</caption>
    <thead>
      <tr>
        <th scope="col">Lorem ipsum</th>
        <th scope="col">Dolor set</th>
        <th scope="col">Amet</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor set amet</td>
        <td>Lorem</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor set amet</td>
        <td>Lorem</td>
        <td>100</td>
      </tr>
      <tr>
        <td colspan="3">This cell takes up three columns</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor set amet</td>
        <td>Lorem</td>
        <td>40</td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Data over meerdere rijen

Data weergeven over meer dan een rij kan gebruikt worden binnen tabellen. Dit kan handig zijn om data gebruiksvriendelijker weer te geven.

• Om een datacel over meerdere rijen te plaatsen gebruik een rowspan="[number]" Bijvoorbeeld: rowspan="2" op de td.

Visueel voorbeeld:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met data over meerdere rijen:</caption>
    <thead>
      <tr>
        <th scope="col">Lorem ipsum</th>
        <th scope="col">Dolor set</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>10</td>
        <td rowspan="2">110</td>
      </tr>
      <tr>
        <td>Ipsum</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>40</td>
        <td>40</td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Tabel - Gecomprimeerde weergave

Voor het tonen van grote datasets kan het voor de gebruiksvriendelijkheid fijner zijn om de data gecomprimeerd weer te geven zodat het makkelijker is voor de gebruiker om overzicht te houden. Om gebruik te maken van de gecomprimeerde weergave voeg de class condensed toe op de Table

Visueel voorbeeld:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table class="condensed">
    <caption>Simple table example:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Gegroepeerde data

Data kan gegroepeerd weergegeven worden, dit kan gebruikt worden voor gebruiksvriendelijkheid.

• Om kolommen te groeperen, voeg binnen de thead een colgroup toe.
• Plaats de colgroup direct onder de caption als deze aanwezig is.
• Geef binnen de colgroup aan hoeveel kolommen de groep bevat. Door een span="[number]" bijvoorbeeld: span="2" op te geven.

Visueel voorbeeld gegroepeerde kolommen:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met gegroepeerde data:</caption>
    <colgroup>
        <col>
        <col span="2" class="tint-1">
        <col span="2" class="tint-2">
    </colgroup>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor</td>
        <td>Consectetur</td>
        <td>Adepicing</td>
      </tr>
      <tr>
        <td>Ipsum</td>
        <td>Set</td>
        <td>Amet</td>
        <td>Ipsum</td>
        <td>Dolor</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Consectetur</td>
        <td>Adepicing</td>
        <td>Lorem</td>
        <td>Ipsum</td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Sorteerbare data

Om inzicht te krijgen in de data kan het behulpzaam zijn om de gebruiker de data te laten sorteren. Bijvoorbeeld op basis van op of aflopende data.

• Om gebruik te maken van het sorteericoon voeg de class sortable toe aan de th
• Om gebruik te maken van het naar omhoog wijzende icoon voeg de class ascending toe aan de th.
• Om gebruik te maken van het naar beneden wijzende icoon voeg de class descending toe aan de th.
• Voeg een button toe binnen de th aangezien het sorteerelemeent klikbaar moet zijn.
• Voeg abbr="descriptive title" toe aan de <th> om de gebruikerservaring te verbeteren voor gebruikers die gebruik maken van een screenreader. Screenreaders lezen vaak de inhoud van de <th> voor iedere tabelcel voor. Dit betekend dat ook de actieknoppen voorgelezen worden. Om dit te voorkomen kan een alternatieve titel opgegeven worden middels de abbr

Visueel voorbeeld:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met sorteerbare data:</caption>
    <thead>
      <tr>
        <th scope="col" class="sortable" abbr="Sortable data">Sortable
          <button title="Sort ascending">Ascending</button>
        </th>
        <th scope="col" class="ascending" abbr="Ascending data">Ascending
          <button title="Sort descending">Descending</button>
        </th>
        <th scope="col" class="descending" abbr="Descending data">Descending
          <button title="Sort ascending">Ascending</button>
        </th>
      </tr>
    </thead>
  </table>
</div>
              
            

Uitklapbare tabel

Voor het tonen van complexe tabellen met bijbehorende details kan gekozen worden voor een tabel met uitklapbare tabelrijen.

• Let op: Deze tabelstructuur kan als complex ervaren worden. Zeker in combinatie met hulptechnologiën. Maak enkel gebruik van deze opzet als het de gebruiker helpt om complexe de data te begrijpen.
• Voeg een extra <tr> direct onder de bijbehorende zichtbare rij toe om een uitklapbare rij toe te voegen. Geef de uitklapbare rij de class expando-row.
• Voeg een extra kolom toe met <button>s voor het bedienen van de uitklapbare rijen.
  • Gebruik als kolomtitel bijvoorbeeld met de tekst "details".
  • Geef de <button>s de class expando-button.
  • Gebruik een button-tekst die toelicht dat de button de rij zal openklappen, zoals "Open details". Geef de <button> daarnaast een data-close-label="Sluit details" met de bijbehorende tekst voor het dichtklappen van de rij.
• Plaats <script defer src="pad/naar/expando-rows.min.js"></script> in de <head> van het document.
  • Het defer attribuut zorgt ervoor dat het script in de achtergrond geladen wordt, zodat het tonen van de pagina niet geblokkeerd wordt.
  • Wanneer JavaScript niet beschikbaar is, worden alle uitklapbare tabelrijen "uitgeklapt" getoond en worden de expando-<button>s verborgen.
  • Om een tabelrij standaard uitgeklapt te maken, voeg je aria-expanded="true" toe aan de <button>, verander je de button-tekst naar bijvoorbeeld "Sluit details", en vervang je de data-close-label door een data-open-label.
• Voeg binnen de uitklapbare rij een tabelcel toe die de volledige breedte gebruikt. In dit voorbeeld <td colspan="5"></td>. Vul als waarde van de colspan de hoeveelheid kolommen van de tabel in.
• Voeg direct binnen de tabelcel binnen de uitklapbare rij een <span> toe met een omschrijvende tekst voor screenreader gebruikers. Bijvoorbeeld: <span class="visually-hidden">Extra details over lorem ipsum</span>. Voeg aan deze span de class visually-hidden toe om de span te verbergen voor overige gebruikers.
• Vul de uitklapbare tabel met de gewenste data.

Visueel voorbeeld:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <table class="condensed">
    <caption>Voorbeeld uitklapbare tabelrijen:</caption>
    <thead>
      <tr>
        <th scope="col">Risicolevel</th>
        <th scope="col">Bevindingstype</th>
        <th scope="col">Hoeveelheid</th>
        <th scope="col">Status</th>
        <th scope="col">Details</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="critical">Critical</span></td>
        <td>Lorem ipsum dolor set</td>
        <td class="number">4</td>
        <td>New</td>
        <td><button class="expando-button" data-close-label="Sluit details">Open details</button></td>
      </tr>
      <tr class="expando-row">
        <td colspan="5">
            <span class="visually-hidden">Lorem ipsum dolor set</span>
            <h1>Lorem ipsum details</h1>
            <p>De extra content.</p>
        </td>
      </tr>
      <tr>
        <td><span class="high">High</span></td>
        <td>Lorem ipsum dolor set</td>
        <td class="number">12</td>
        <td>New</td>
        <td><button class="expando-button" data-close-label="Sluit details">Open details</button></td>
      </tr>
      <tr class="expando-row">
        <td colspan="5">
            <span class="visually-hidden">Lorem ipsum dolor set</span>
            <h1>Lorem ipsum details</h1>
            <p>De extra content.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Samenvatting

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

• Voeg de class summary toe aan de <table> om gebruik te maken van deze tabelweergave.
• De tabel zal zo smal mogelijk weergegeven worden en met een rustigere grafische weergave.

Visueel voorbeeld:

Html-voorbeeld:

              
<div class="horizontal-scroll">
  <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>
</div>
              
            

Tabel - Sticky header

Voor lange tabellen kan het gewenst zijn om de tabel-header in het zicht te houden. Zodat de gebruiker de titels kan zien.

Aandachtspunten:

• Voeg de class sticky-header toe aan een <div> om de <table> heen. Deze is <div> is nodig om de <table> scrollbaar te maken.
• Een sticky-header-tabel heeft een maximale hoogte van de schermhoogte. Mocht er een andere maximale hoogte gewenst zijn zodat de tabel bijvooreeld minder hoog blijft kan deze via CSS overschreven worden.

Visueel voorbeeld:

Html-voorbeeld:

              
<div class="horizontal-scroll sticky-header">
  <table>
    <caption>Tabelvoorbeeld met een sticky header.</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>
              
            

Tabelrichting

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

Het is hierbij belangrijk om rekening te houden met gebruikers die gebruik maken van hulptechnologië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.

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>