Zoekformulier
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: Ontwikkelaar of tester
- Medium: Website
- Functiebeperking: Visuele beperking