Laten we beginnen met het bespreken van tabellen. We zullen specifiek de volgende tekstorganisatie onderzoeken:

Tabellen

Tabellen in HTML worden gebruikt om gegevens weer te geven in rijen en kolommen, waardoor informatie gestructureerd kan worden georganiseerd.

Tabellen maken

De <table>-tag wordt gebruikt om een tabel in HTML te maken. Tabellen bestaan uit rijen (<tr>) en cellen (<td>), die de structuur en inhoud van de tabel bepalen. De basisstructuur van een tabel is als volgt.
Voorbeeld:

In het bovenstaande voorbeeld:

• De <table>-tag wordt gebruikt om een tabel te maken;
• Elke <tr>-tag vertegenwoordigt een rij in de tabel;
• Binnen elke rij vertegenwoordigen <td>-tags cellen, waarmee de inhoud van elke cel wordt gedefinieerd.

Hoewel het mogelijk is om hier te stoppen met het werken met tabellen, kan de semantiek ervan worden verbeterd om het voor zoekmachines eenvoudiger te maken de inhoud te begrijpen.

Tabelkoppen

De <th>-tag definieert tabelkoppen die kolom- of rijkoppen voorstellen. Deze moet worden gebruikt binnen de <thead>-sectie van een tabel.
Voorbeeld:

In het bovenstaande voorbeeld:

• De <thead>-sectie bevat tabelkopcellen die zijn gedefinieerd met de <th>-tag;
• Elke <th>-tag vertegenwoordigt een kopcel.

Tabellichaam

De tbody-sectie volgt op de thead-sectie en omvat alle tabelgegevens behalve de kopteksten. Alle elementen binnen de tbody blijven ongewijzigd.
Voorbeeld:

Samenvatting

Tabellen zijn gestructureerd met een hiërarchie van elementen:

1. Tabel

De <table>-tag is het bovenliggende element dat de volledige tabel definieert. Het bevat alle rijen en kolommen van de tabel.

<table></table>

2. Tabelkop

De <thead>-tag wordt gebruikt om de koprijen van de tabel te groeperen. Deze bevat een of meer rijen (<tr>) met kopcellen (<th>), die de kolomkoppen definiëren.

<table>
  <thead></thead>
</table>

3. Tabellichaam

De <tbody>-tag wordt gebruikt om de hoofdinhoud van de tabel te groeperen. Deze bevat een of meer rijen (<tr>) met datacellen (<td>), die de hoofdinhoud van de tabel definiëren.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

4. Tabelrijen

De <tr>-tag vertegenwoordigt een rij binnen de tabel. Deze bevat een of meer tabelcellen (<td> of <th>), die de inhoud van elke kolom binnen de rij definiëren.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

5. Tabelcellen

De <td>-tag vertegenwoordigt een standaard gegevenscel binnen het tabellichaam. De <th>-tag vertegenwoordigt een kopcel binnen de tabelkop. Elke cel bevat de daadwerkelijke inhoud van de tabel, zoals tekst, afbeeldingen of andere HTML-elementen.

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Videotutorial