Zoekformulier
Tabellen betekenisvol opmaken op een website
Over tabellen
Met tabellen kunnen complexe gegevens eenvoudig en overzichtelijk worden gepresenteerd. Een tabel bestaat uit rijen en kolommen. De gegevens in de rijen en kolommen hebben onderling verbanden met elkaar, zowel horizontaal als verticaal.
Tabellen hebben meerdere functies:
- Schermlezers kunnen een overzicht van alle tabellen presenteren. Zo kan snel worden genavigeerd naar de content.
- Schermlezers kunnen eenvoudig door de cellen in een tabel navigeren waarbij de relaties steeds worden vermeld.
Maak tabellen op met een tabel-element
Tabelkoppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een andere achtergrond of vetgedrukte tekst. Individuele cellen worden vaak onderscheiden door een rand of een wisselende rijkleur. Mensen die de tabel kunnen zien, kunnen deze relaties vaak snel herkennen maar dit soort vormgeving moet niet de enige manier zijn waarop de structuur en relaties worden overgebracht.
De betekenis moet ook in de code worden toegevoegd zodat het ook door software te begrijpen is. Dit is handig voor mensen die gebruik maken van hulptechnologieën. Zorg daarom dat alle tabellen worden opgemaakt met een tabel-element en dat tabelkoppen worden opgemaakt met een tabelkop-element. Hiermee wordt dan vastgelegd welke cellen koppen zijn en in welke cellen gegevens staan en wat de onderlinge relaties tussen de cellen zijn.
Gebruik eventueel het bijschrift om beknopt het onderwerp van de tabel te beschrijven.
Tip: Gebruik tabellen alleen als het de informatie duidelijker maakt. Zorg voor simpele en overzichtelijke tabellen.
Tabellen toevoegen op een website
In een CMS kunnen tabellen meestal makkelijk worden toegevoegd in de editor op de pagina. De editor zorgt dat de juiste HTML-elementen worden toegevoegd aan de tekst.
Zorg dat de cellen die functie hebben van een tabelkop, worden opgemaakt als tabelkop. Als het mogelijk is, stel dan ook het bereik van de tabelkoppen in om aan te geven welke cellen bij de kop horen.
Tabellen toevoegen met een HTML tabel-element
Tabellen worden in de code opgemaakt met het <table>-element. Dit element heeft onderliggende <tr>-, <th>-, en <td>-elementen:
- Het
<tr>-element wordt gebruikt voor een tabelrij. - Het
<th>-element wordt gebruikt voor een tabelkop. - Het
<td>-element wordt gebruikt voor de gegevenscellen.
Het <caption>-element geeft de inhoud van de tabel in het kort weer. Het <caption>-element is optioneel.
Zowel rijen als kolommen kunnen een tabelkop hebben.
Gebruik geen <div>-elementen samen met CSS om de uitstraling van een tabel te simuleren. Het probleem hiermee is dat de semantische betekenis van de tabel verdwijnt, waardoor de structuur en relaties niet meer door software te begrijpen is.
Tabelkoppen voor een eenvoudige HTML-tabel
Voor een eenvoudige tabel is een impliciete koppeling tussen tabelkop en gegevenscel voldoende. Gebruik het scope-attribuut om aan te geven welke cellen bij de kop horen. Voeg het scope-attribuut toe aan de tabelkop van een rij of kolom:
- Het attribuut
scope="col"geeft aan dat de cel een kop is voor de kolom. - Het attribuut
scope="row"geeft aan dat de cel een kop is voor de rij.
In de code ziet een tabel met 1 rij met tabelkoppen er zo uit:
In de code ziet een tabel met 1 kolom met tabelkoppen er zo uit:
Tabelkoppen voor een complexe HTML-tabel
Voor een complexe tabel is een expliciete koppeling tussen tabelkop en gegevenscel nodig. Gebruik het headers-attribuut om aan te geven welke kop bij de cel hoort. Dit kunnen meerdere koppen zijn. Het headers-attribuut koppelt de cel met het id-attribuut aan de cel.
In de code ziet een tabel met het headers-attribuut er zo uit:
Zie ook
- WCAG: 1.3.1 Info en relaties
- Categorie: Tekst
- Functiegroep: Contentspecialist of redacteur
- Functiegroep: Ontwikkelaar of tester
- Functiebeperking: Visuele beperking