Tabellen zijn een effectief hulpmiddel om gestructureerde gegevens op een overzichtelijke manier weer te geven. In webdesign worden tabellen traditioneel gebruikt om gegevens te presenteren in rijen en kolommen, vergelijkbaar met hoe je dat zou doen in spreadsheetprogramma's zoals Microsoft Excel of Google Sheets.
Een tabel in HTML wordt gemaakt met het <table> element. Binnen een tabel gebruik je de <tr> (table row) elementen om rijen te definiëren, en binnen deze rijen gebruik je <td> (table data) voor individuele cellen.
<table>
<tr>
<td>Rij 1, Cel 1</td>
<td>Rij 1, Cel 2</td>
</tr>
<tr>
<td>Rij 2, Cel 1</td>
<td>Rij 2, Cel 2</td>
</tr>
</table>
| Rij 1, Cel 1 | Rij 1, Cel 2 |
| Rij 2, Cel 1 | Rij 2, Cel 2 |
Voor tabellen met kopteksten kun je het <th> (table header) element gebruiken. Dit element benadrukt visueel dat de celinhoud een kop is. Deze worden meestal in een <thead> geplaatst, gevolgd door <tbody> voor de hoofdinhoud van de tabel.
<table>
<thead>
<tr>
<th>Koptekst 1</th>
<th>Koptekst 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rij 1, Cel 1</td>
<td>Rij 1, Cel 2</td>
</tr>
<tr>
<td>Rij 2, Cel 1</td>
<td>Rij 2, Cel 2</td>
</tr>
</tbody>
</table>
| Hoofding 1 | Hoofding 2 |
|---|---|
| Rij 1, Cel 1 | Rij 1, Cel 2 |
| Rij 2, Cel 1 | Rij 2, Cel 2 |
In sommige gevallen wil je misschien cellen samenvoegen over meerdere kolommen of rijen. Dit kan gedaan worden met de colspan en rowspan attributen, zoals hieronder getoond.
<table>
<tr>
<td colspan="2">Samengevoegde Cel</td>
</tr>
<tr>
<td rowspan="2">Verticaal Samengevoegde Cel</td>
<td>Rij 2, Cel 2</td>
</tr>
</table>
| Samengevoegde Cel | |
| Verticaal Samengevoegde Cel | Rij 2, Cel 2 |
| Rij 3, Cel 2 | |
Hoewel de standaardpresentatie van tabellen duidelijk en functioneel is, kun je met CSS veel doen om ze visueel aantrekkelijker en leesbaarder te maken. Denk aan het toevoegen van randen, het kleuren van alternatieve rijen en het aanpassen van de tekstuitlijning.
| Kop 1 | Kop 2 | Kop 3 |
|---|---|---|
| Rij 1, Cel 1 | Rij 1, Cel 2 | Rij 1, Cel 3 |
| Rij 2, Cel 1 | Rij 2, Cel 2 | Rij 2, Cel 3 |
| Rij 3, Cel 1 | Rij 3, Cel 2 | Rij 3, Cel 3 |
Wanneer je tabellen gebruikt, is het belangrijk om toegankelijkheid in gedachten te houden. Zorg ervoor dat de inhoud logisch is geordend en overweeg om het <caption> element te gebruiken om een beschrijvende titel aan je tabel toe te voegen. Gebruik daarnaast scope attributen in <th> elementen om de relatie tussen koppen en cellen te definiëren.
In latere hoofdstukken gaan we dieper in op geavanceerde technieken voor het werken met tabellen, inclusief responsief design en interactieve features.