Summary  
This chapter explains how to structure HTML tables by using the `<table>`, `<caption>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, and `<td>` elements to organize rows, headers, and data cells.

General domain of usage  
Presenting structured data in web pages

Tabellen helpen gestructureerde gegevens weer te geven, zoals roosters, kalenders, financiële overzichten, menu's en prijslijsten. HTML biedt verschillende elementen voor het maken van tabellen.

Belangrijkste tabelelementen:
- `<table>`: de tabelcontainer;
- `<tr>`: een rij;
- `<th>`: een kopcel (vetgedrukt, gecentreerd);
- `<td>`: een gewone gegevenscel.

Hieronder wordt stap voor stap een eenvoudige menutabel opgebouwd.

## Stap 1: Zet de HTML-structuur op
Begin met het aanmaken van de basis HTML-structuur voor je pagina:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    
  </head>
  <body>
    
  </body>
</html>
```

## Stap 2: Definieer de tabel
Voeg binnen het `<body>`-element de `<table>`-tag toe om de tabel te definiëren:
```html
<table>
  
</table>
```

## Stap 3: Voeg een tabelonderschrift toe (optioneel)
Als je een titel aan de tabel wilt geven, kun je de `<caption>`-tag gebruiken:
```html
<table>
  <caption>New menu</caption>
  
</table>
```

## Stap 4: Maak tabelkoppen aan
Voeg vervolgens de tabelkoppen toe binnen het `<thead>`-element. Elke kop wordt gedefinieerd met de `<th>`-tag:
```html
<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  
</table>
```

## Stap 5: Vul de tabel met gegevens
Gebruik het `<tbody>`-element om de tabelrijen te omsluiten en `<td>`-tags om de cellen met gegevens te definiëren:
```html
<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>
```

## Volledige code
Neem even de tijd om alle elementen zorgvuldig te bekijken zodat hun onderlinge relatie duidelijk is.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gTGluayB0byBleHRlcm5hbCBzdHlsZXNoZWV0IC0tPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHRhYmxlPgogICAgICA8IS0tIFRhYmxlIHRpdGxlOiBEZXNjcmliZXMgdGhlIGNvbnRlbnQgb2YgdGhlIHRhYmxlIC0tPgogICAgICA8Y2FwdGlvbj4KICAgICAgICBOZXcgTWVudQogICAgICA8L2NhcHRpb24+CgogICAgICA8IS0tIFRhYmxlIGhlYWRlcjogRGVmaW5lcyBjb2x1bW4gaGVhZGluZ3MgLS0+CiAgICAgIDx0aGVhZD4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGg+Q2F0ZWdvcnk8L3RoPgogICAgICAgICAgPHRoPk1lYWw8L3RoPgogICAgICAgICAgPHRoPlByaWNlPC90aD4KICAgICAgICA8L3RyPgogICAgICA8L3RoZWFkPgoKICAgICAgPCEtLSBUYWJsZSBib2R5OiBDb250YWlucyB0aGUgbWFpbiBjb250ZW50IG9mIHRoZSB0YWJsZSAtLT4KICAgICAgPHRib2R5PgogICAgICAgIDwhLS0gUm93IDE6IERldGFpbHMgZm9yIGFuIGFwcGV0aXplciAtLT4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGQ+QXBwZXRpemVyPC90ZD4KICAgICAgICAgIDx0ZD5HYXJsaWMgU2hyaW1wczwvdGQ+CiAgICAgICAgICA8dGQ+JDg8L3RkPgogICAgICAgIDwvdHI+CiAgICAgICAgPCEtLSBSb3cgMjogRGV0YWlscyBmb3IgYSBwYXN0YSBkaXNoIC0tPgogICAgICAgIDx0cj4KICAgICAgICAgIDx0ZD5QYXN0YTwvdGQ+CiAgICAgICAgICA8dGQ+TG9ic3RlciBMaW5ndWluZSBOb29kbGVzPC90ZD4KICAgICAgICAgIDx0ZD4kMTY8L3RkPgogICAgICAgIDwvdHI+CiAgICAgICAgPCEtLSBSb3cgMzogRGV0YWlscyBmb3IgYSBzYW5kd2ljaCAtLT4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGQ+U2FuZHdpY2g8L3RkPgogICAgICAgICAgPHRkPkxvYnN0ZXIgVGFpbCBTYW5kd2ljaDwvdGQ+CiAgICAgICAgICA8dGQ+JDExPC90ZD4KICAgICAgICA8L3RyPgogICAgICA8L3Rib2R5PgogICAgPC90YWJsZT4KICA8L2JvZHk+CjwvaHRtbD4=

LyogCiAgV2UgY29sbGFwc2UgdGhlIGJvcmRlcnMgb2YgZWFjaCBjZWxsLiAKICBCeSBkZWZhdWx0IGVhY2ggY2VsbCBoYXMgaXRzIG93biBib3JkZXJzIAogIHdoaWNoIGFyZSBub3QgY29ubmVjdGVkLgoqLwp0YWJsZSB7CiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTsKfQoKLyogCiAgQWRkIGEgYm9yZGVyIGFuZCBwYWRkaW5nIHRvIHRoZSBjZWxscywgCiAgdGhlIGRpc3RhbmNlIGZyb20gdGhlIGNvbnRlbnQgdG8gdGhlIGJvcmRlci4KKi8KdGFibGUgdGgsCnRhYmxlIHRkIHsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwp9

Standaard hebben HTML-tabellen geen specifieke visuele stijl. Om het uiterlijk van de tabel aan te passen, voeg je CSS-stijlen toe in een apart CSS-bestand of binnen een `<style>`-tag in de `<head>`-sectie van het HTML-bestand.

Er is echter geen noodzaak om nu al met CSS aan de slag te gaan, omdat de huidige focus alleen op HTML ligt.
Als je wilt zien hoe de tabel eruitziet zonder enige CSS-opmaak, kun je regel 4 verwijderen: `<link rel="stylesheet" href="index.css" />`, waarmee de CSS-stijlen worden geïmporteerd.

 

Opmerking

Welk HTML-element wordt gebruikt om een tabel op een webpagina te definiëren?

Welk HTML-element wordt gebruikt om een rij binnen een tabel te definiëren?

Wat is het doel van het `<th>`-element in een HTML-tabel?

Leer de basisprincipes van HTML (HyperText Markup Language), de basis van webontwikkeling. Deze cursus voor beginners behandelt tags, attributen, elementen en het structureren van webpagina's. Verwerf praktische vaardigheden in het maken van koppen, alinea's, lijsten, afbeeldingen, links, formulieren en tabellen. Ontdek best practices, optimalisatie en webtoegankelijkheid. Begin je webontwikkelingsreis met HTML.

Verken de werking van het web. Leer hoe gegevens over netwerken reizen, ontdek de rol van protocollen en ontrafel de mysteries van IP-adressen en domeinnamen. Krijg een hoogwaardig begrip van hoe webbrowsers en servers communiceren om webinhoud te leveren.

Ontdek de kracht van tags om inhoud te structureren, van koppen en alinea's tot lijsten en tabellen. Leer hoe je de elementen kunt verbeteren met attributen.

De kern van de HTML-documentstructuur. Leer de componenten van een HTML-document, inclusief de doctype-verklaring, head en body. Begrijp het doel van elk element en hoe ze bijdragen aan de algehele structuur van een webpagina.

Maak een webpagina aantrekkelijker met behulp van media zoals afbeeldingen, audio en video. Werk met gestructureerde tabelgegevens in de vorm van tabellen.

Ontdek de veelzijdigheid van HTML-formulieren. Leer intuïtieve en gebruiksvriendelijke formulieren ontwerpen door gebruik te maken van belangrijke concepten en technieken. Ontdek hoe formulieren gebruikersinteractie en gegevensverzending op websites mogelijk maken.

Tabellen Maken en Structureren in HTML

Stap 1: Zet de HTML-structuur op

Stap 2: Definieer de tabel

Stap 3: Voeg een tabelonderschrift toe (optioneel)

Stap 4: Maak tabelkoppen aan

Stap 5: Vul de tabel met gegevens

Volledige code

1. Welk HTML-element wordt gebruikt om een tabel op een webpagina te definiëren?

2. Welk HTML-element wordt gebruikt om een rij binnen een tabel te definiëren?

3. Wat is het doel van het `<th>`-element in een HTML-tabel?