HTML Tabel

Je kunt tabellen maken met HTML.

Voorbeeld

Tabel
Dit voorbeeld demonstreert hoe je een tabel maakt in een HTML-document.
Tabelranden
Dit voorbeeld demonstreert verschillende types tabelranden.

(Meer voorbeelden kun je vinden aan het einde van deze pagina)

Tabel

Een tabel wordt gedefinieerd met de <table>-tag. Elke tabel heeft meerdere rijen (gedefinieerd met de <tr>-tag), en elke rij wordt gesplitst in meerdere cellen (gedefinieerd met de <td>-tag). De letter td staat voor tabelgegevens (table data), dat is de inhoud van de datacel. Datacellen kunnen tekst, afbeeldingen, lijsten, paragrafen, formulieren, horizontale lijnen, tabellen, enz. bevatten.

<table border="1">
<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>

Wordt weergegeven in de browser als volgt:

rij 1, cel 1 rij 1, cel 2
rij 2, cel 1 rij 2, cel 2

Tabel en randeigenschap

Als je de randeigenschap niet definieert, wordt de tabelrand niet weergegeven. Soms is dit nuttig, maar in de meeste gevallen willen we de rand weergeven.

Gebruik de randeigenschap om een tabel met randen weer te geven:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Tabelkop

De tabelkop van de tabel wordt gedefinieerd met de <th>-tag.

De meeste browsers tonen de tabelkop als vet, centreren tekst:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<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>

Wordt weergegeven in de browser als volgt:

Heading Another Heading
rij 1, cel 1 rij 1, cel 2
rij 2, cel 1 rij 2, cel 2

Lege lege cel in de tabel

In sommige browsers wordt de tabelcel zonder inhoud niet goed weergegeven. Als een cel leeg is (geen inhoud), kan de browser de rand van deze cel mogelijk niet weergeven.

<table border="1">
<tr>
<td>rij 1, cel 1</td>
<td>rij 1, cel 2</td>
</tr>
<tr>
<td></td>
<td>rij 2, cel 2</td>
</tr>
</table>

De browser kan dit zo weergeven:

Lege lege cel in de tabel

Let op:De rand van deze lege cel wordt niet weergegeven. Om dit te voorkomen, voeg een lege ruimte placeholder toe aan de lege cel, zodat de rand wordt weergegeven.

<table border="1">
<tr>
<td>rij 1, cel 1</td>
<td>rij 1, cel 2</td>
</tr>
<tr>
<td> </td>
<td>rij 2, cel 2</td>
</tr>
</table>

Wordt weergegeven in de browser als volgt:

rij 1, cel 1 rij 1, cel 2
　 rij 2, cel 2

Meer voorbeelden

Tabel zonder randen
Dit voorbeeld toont een tabel zonder randen.
Kop van de tabel (Heading)
Dit voorbeeld toont hoe je de kop van de tabel kunt weergeven.
Lege cellen
Dit voorbeeld toont hoe je lege cellen kunt behandelen met behulp van ' '.
Tabel met titel
Dit voorbeeld toont een tabel met een titel (caption).
Tabelcellen die over meerdere rijen of kolommen lopen
Dit voorbeeld toont hoe je tabelcellen kunt definiëren die over meerdere rijen of kolommen lopen.
Tags binnen de tabel
Dit voorbeeld toont hoe je elementen kunt weergeven binnen verschillende elementen.
Celrandmarge(Cell padding)
Dit voorbeeld toont hoe je een witruimte kunt maken tussen de inhoud van de cel en de rand van de cel met behulp van 'Cell padding'.
Celruimte(Cell spacing)
Dit voorbeeld toont hoe je de afstand tussen cellen kunt vergroten met behulp van 'Cell spacing'.
Achtergrondkleur of achtergrondafbeelding toevoegen aan de tabel
Dit voorbeeld toont hoe je een achtergrond kunt toevoegen aan de tabel.
Achtergrondkleur of achtergrondafbeelding toevoegen aan tabelcellen
Dit voorbeeld toont hoe je achtergrond kunt toevoegen aan een of meerdere tabelcellen.
Inrichting van inhoud in tabelcellen
Dit voorbeeld toont hoe je de 'align'-eigenschap kunt gebruiken om de inhoud van de cellen te arrangeren, zodat je een aantrekkelijke tabel kunt maken.
Frame(frame)-eigenschap
Dit voorbeeld toont hoe je de 'frame'-eigenschap kunt gebruiken om de randen rond de tabel te controleren.

Tabeltag

Tabel Beschrijving
<table> Definieer de tabel
<caption> Definieer de titel van de tabel.
<th> Definieer de kop van de tabel.
<tr> Definieer de rij van de tabel.
<td> Definieer de cel van de tabel.
<thead> Definieer de kop van de tabel.
<tbody> Definieer het lichaam van de tabel.
<tfoot> Definieer de voettekst van de tabel.
<col> Definieer de eigenschappen die gebruikt worden voor de kolommen van de tabel.
<colgroup> Definieer de groep van kolommen van de tabel.