HTML eerste stappen – Les 5 – Tabellen

10/10/2025, by Ivan

Een van de belangrijkste manieren om informatie op te slaan is met tabellen. Tabellen worden gebruikt in Excel, Access en vele andere databases. Ze presenteren gegevens op een overzichtelijke manier, waardoor het eenvoudig is om grafieken en diagrammen te maken.
In deze les leren we hoe we tabellen in HTML kunnen maken. Hiervoor gebruiken we de tags <table>, <tr>, <td>, <th>, <thead>, <tbody> en <tfoot>.

De tag <table>

TABLE is de hoofdtabel-tag, waarin alle andere table-tags worden genest.

<table>
</table>

Alle andere tags schrijven we binnen deze tag.

De tag <tr>

TR is de rij-tag. Elke rij wordt omsloten door <tr></tr>. Als we drie rijen in de tabel willen hebben, gebruiken we drie van zulke paren:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

De tag <td>

TD is de cel-tag. Elke cel bevindt zich binnen een rij. Om de tabel correct weer te geven, moet elke rij hetzelfde aantal cellen bevatten. Laten we een tabel maken met vier cellen per rij:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Nu vullen we de tabel met gegevens:

<table>
  <tr>
    <td>Nummer</td>
    <td>Achternaam</td>
    <td>Voornaam</td>
    <td>Patroniem</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Ivanov</td>
    <td>Ivan</td>
    <td>Ivanovitsj</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Petrov</td>
    <td>Pjotr</td>
    <td>Petrovitsj</td>
  </tr>
</table>

We kunnen de tabel logischer structureren door deze in drie secties te verdelen: thead — de kop, tbody — de inhoud, en tfoot — de voettekst.

De tag <tbody>

TBODY is optioneel, maar kan worden gebruikt om aan te geven dat dit het hoofdgedeelte van de tabel is:

<table>
  <tbody>
    <tr>
      <td>Nummer</td>
      <td>Achternaam</td>
      <td>Voornaam</td>
      <td>Patroniem</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovitsj</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pjotr</td>
      <td>Petrovitsj</td>
    </tr>
  </tbody>
</table>

De tag <thead>

THEAD wordt gebruikt om de kop van een tabel te maken. Laten we de eerste rij in een thead plaatsen:

<table>
  <thead>
    <tr>
      <td>Nummer</td>
      <td>Achternaam</td>
      <td>Voornaam</td>
      <td>Patroniem</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovitsj</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pjotr</td>
      <td>Petrovitsj</td>
    </tr>
  </tbody>
</table>

Nu vervangen we de <td>-cellen in de kop door <th>-cellen om aan te geven dat het om kolomtitels gaat:

<table>
  <thead>
    <tr>
      <th>Nummer</th>
      <th>Achternaam</th>
      <th>Voornaam</th>
      <th>Patroniem</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovitsj</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pjotr</td>
      <td>Petrovitsj</td>
    </tr>
  </tbody>
</table>

Als je een moderne browser gebruikt, worden de kolomnamen standaard vet weergegeven. Er is nog één laatste tag: de voettekst van de tabel — <tfoot>.

De tag <tfoot>

TFOOT definieert een voettekst of een toelichting onderaan de tabel:

<table>
  <thead>
    <tr>
      <th>Nummer</th>
      <th>Achternaam</th>
      <th>Voornaam</th>
      <th>Patroniem</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovitsj</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pjotr</td>
      <td>Petrovitsj</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Tabel gemaakt in 2012</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

Het attribuut colspan

Een van de belangrijke attributen van de <td>-tag is colspan. Hiermee kun je cellen samenvoegen. Laten we eens kijken naar onze voettekst. We hebben vier cellen, maar slechts één daarvan bevat tekst. We kunnen die vier cellen samenvoegen met het attribuut colspan:

<table>
  <thead>
    <tr>
      <th>Nummer</th>
      <th>Achternaam</th>
      <th>Voornaam</th>
      <th>Patroniem</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovitsj</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pjotr</td>
      <td>Petrovitsj</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Tabel gemaakt in 2012</td>
    </tr>
  </tfoot>
</table>

Nu hebben we één grote cel die de breedte van vier cellen beslaat. De waarde van het attribuut colspan geeft aan hoeveel cellen zijn samengevoegd.

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring