HTMLhulp.nl logo
Tabellen zonder frustratie in HTML

Tabellen zonder frustratie in HTML

Tabellen zonder frustratie in HTML

Tabellen in HTML zijn een krachtig hulpmiddel om gegevens overzichtelijk te presenteren. Denk aan prijslijsten, roosters, productvergelijkingen of rapportages. Toch horen we vaak dat beginnende webbouwers tabellen lastig vinden. De code lijkt al snel rommelig en zonder de juiste kennis wordt de weergave onoverzichtelijk. In dit artikel leer je stap voor stap hoe je tabellen maakt die niet alleen goed werken, maar ook toegankelijk en gebruiksvriendelijk zijn.

Wanneer gebruik je een tabel?

Tabellen zijn bedoeld om gestructureerde data weer te geven. Een tabel gebruik je wanneer je gegevens in rijen en kolommen wilt presenteren. Voorbeelden:

  • Een prijstabel van verschillende abonnementen

  • Een lesrooster

  • Een overzicht van producteigenschappen

  • Statistieken of meetgegevens

Gebruik een tabel niet voor lay-outdoeleinden. Vroeger werd HTML vaak misbruikt door pagina’s in tabellen te zetten om kolommen te maken, maar daarvoor zijn tegenwoordig CSS-technieken zoals flexbox en grid veel geschikter.

De basisstructuur van een tabel

Een eenvoudige tabel bestaat uit drie belangrijke onderdelen:

  • <table> – de container van de hele tabel

  • <tr> – een rij in de tabel

  • <td> – een cel in de tabel

Een voorbeeld van de simpelste tabel:

<table>
<tr>
<td>Product</td>
<td>Prijs</td>
</tr>
<tr>
<td>Koffie</td>
<td>€ 2,50</td>
</tr>
<tr>
<td>Thee</td>
<td>€ 2,00</td>
</tr>
</table>

Kopcellen toevoegen

Een tabel wordt pas echt duidelijk wanneer je kopcellen toevoegt met <th> in plaats van <td>. Deze worden standaard vetgedrukt weergegeven en geven semantische waarde.

<table>
<tr>
<th>Product</th>
<th>Prijs</th>
</tr>
<tr>
<td>Koffie</td>
<td>€ 2,50</td>
</tr>
<tr>
<td>Thee</td>
<td>€ 2,00</td>
</tr>
</table>

Hier snapt zowel de browser als de gebruiker beter dat de eerste rij koppen bevat.

Extra structuur met <thead>, <tbody> en <tfoot>

Voor langere tabellen is het slim om een duidelijke scheiding aan te brengen tussen kop, inhoud en eventueel een voetnoot.

<table>
<thead>
<tr>
<th>Product</th>
<th>Prijs</th>
</tr>
</thead>
<tbody>
<tr>
<td>Koffie</td>
<td>€ 2,50</td>
</tr>
<tr>
<td>Thee</td>
<td>€ 2,00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Totaal</td>
<td>€ 4,50</td>
</tr>
</tfoot>
</table>

Met deze structuur kan een browser de inhoud beter begrijpen. Ook schermlezers profiteren hiervan, omdat zij direct weten waar de koprij en inhoud beginnen.

Cellen samenvoegen

Soms wil je cellen laten doorlopen over meerdere rijen of kolommen. Dat doe je met de attributen rowspan en colspan.

<table>
<tr>
<th>Maand</th>
<th colspan="2">Verkoop</th>
</tr>
<tr>
<td>Januari</td>
<td>Koffie: 120</td>
<td>Thee: 90</td>
</tr>
</table>

Hier zie je dat de kopcel “Verkoop” over twee kolommen loopt.

Tabellen en toegankelijkheid

Toegankelijke tabellen zijn belangrijk voor gebruikers die een schermlezer gebruiken. Om dit goed te doen, kun je de attributen scope en headers gebruiken.

Voorbeeld met scope

<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Prijs</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Koffie</th>
<td>€ 2,50</td>
</tr>
<tr>
<th scope="row">Thee</th>
<td>€ 2,00</td>
</tr>
</tbody>
</table>

Met scope="col" geef je aan dat de kopcel een kolom beschrijft. Met scope="row" geef je aan dat de kopcel een rij beschrijft. Dit maakt de tabel veel duidelijker voor schermlezers.

Tabellen opmaak geven met CSS

Kale tabellen ogen vaak saai. Met CSS kun je ze beter leesbaar maken.

table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}

Met deze simpele CSS maak je een nette, leesbare tabel met afwisselende achtergrondkleuren voor de rijen.

Responsieve tabellen

Een uitdaging bij tabellen is dat ze op mobiele schermen vaak te breed zijn. Een simpele oplossing is horizontaal scrollen mogelijk maken:

.table-container {
overflow-x: auto;
}
table {
width: 100%;
min-width: 600px;
}

In je HTML zet je de tabel in een container:

<div class="table-container">
<table>
<!-- inhoud -->
</table>
</div>

Een andere aanpak is tabellen ombouwen tot kaarten op mobiel, maar dat vereist meer CSS en soms JavaScript. Voor veel situaties is horizontaal scrollen de meest praktische oplossing.

Praktisch voorbeeld: prijstabel

Een prijstabel met drie abonnementen kan er zo uitzien:

<table>
<thead>
<tr>
<th>Abonnement</th>
<th>Prijs per maand</th>
<th>Functies</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>€ 9,99</td>
<td>1 gebruiker, 10 GB opslag</td>
</tr>
<tr>
<td>Pro</td>
<td>€ 19,99</td>
<td>5 gebruikers, 100 GB opslag</td>
</tr>
<tr>
<td>Enterprise</td>
<td>€ 49,99</td>
<td>Onbeperkte gebruikers, 1 TB opslag</td>
</tr>
</tbody>
</table>

Met de juiste CSS krijgt deze tabel een professionele uitstraling en is hij direct bruikbaar voor een commerciële website.

Veelgemaakte fouten met tabellen

  1. Tabellen gebruiken voor lay-out in plaats van data.

  2. Geen kopcellen gebruiken, waardoor de tabel onduidelijk wordt.

  3. Geen rekening houden met mobiele schermen.

  4. Te veel inline-styling in plaats van nette CSS.

  5. Ontbrekende alt-teksten bij afbeeldingen in tabellen.

Tabellen kunnen frustrerend zijn als je niet weet hoe je ze goed moet opbouwen. Maar met de juiste structuur, semantiek en styling maak je van elke tabel een krachtig hulpmiddel om data helder te presenteren.