HTMLboek
Tabellen
Gestructureerde informatie wordt vaak in een tabel weergegeven. Ook HTML biedt de mogelijkheid om tabellen toe te voegen.
Basistabel
In de meest eenvoudige vorm bestaat een tabel uit drie elementen: <table> om aan te geven dat je een tabel wilt maken, met daarin voor iedere rij een <tr> (table row), met daarin voor iedere kolom weer een <td> (table data). Binnen de <td>'s komt de daadwerkelijke inhoud van de tabel. Een voorbeeld:
<tr>
<td>rij 1, kolom 1</td>
<td>rij 1, kolom 2</td>
<td>rij 1, kolom 3</td>
<td>rij 1, kolom 4</td>
</tr>
<tr>
<td>rij 2, kolom 1</td>
<td>rij 2, kolom 2</td>
<td>rij 2, kolom 3</td>
<td>rij 2, kolom 4</td>
</tr>
<tr>
<td>rij 3, kolom 1</td>
<td>rij 3, kolom 2</td>
<td>rij 3, kolom 3</td>
<td>rij 3, kolom 4</td>
</tr>
</table>
| rij 1, kolom 1 | rij 1, kolom 2 | rij 1, kolom 3 | rij 1, kolom 4 |
| rij 2, kolom 1 | rij 2, kolom 2 | rij 2, kolom 3 | rij 2, kolom 4 |
| rij 3, kolom 1 | rij 3, kolom 2 | rij 3, kolom 3 | rij 3, kolom 4 |
Je kunt zoveel rijen <tr> en kolommen (of eigenlijk cellen) <td> toevoegen. Waar je wel op moet letten is dat er evenveel <td>'s in iedere <tr> van een tabel zitten.
Cellen samenvoegen
Soms wil je meerdere cellen horizontaal of verticaal samenvoegen, bijvoorbeeld voor een kolomkop die boven twee kolommen staat. Hiervoor kun je de attibuten colspan en/of rowspan toevoegen aan een <td>.
Met colspan zorg je er voor dat de cel horizontaal doorloopt over meerdere kolommen. De waarde van het attribuut colspan geeft aan hoeveel kolommen breed de samengevoegde cel moet worden. Dus colspan="2" betekent dat er twee cellen horizontaal worden samengevoegd. Voor iedere cel die je samenvoegt komt er één <td> minder in de rij. Dus als je colspan="2" gebruikt krijg je één <td> minder in die rij. Bij colspan="3" komen er twee <td>'s minder, etc.
<tr>
<td>rij 1, kolom 1</td>
<td colspan="2">rij 1, kolom 2 en 3</td>
<td>rij 1, kolom 4</td>
</tr>
<tr>
<td colspan="3">rij 2, kolom 1, 2 en 3</td>
<td>rij 2, kolom 4</td>
</tr>
<tr>
<td>rij 3, kolom 1</td>
<td>rij 3, kolom 2</td>
<td>rij 3, kolom 3</td>
<td>rij 3, kolom 4</td>
</tr>
<tr>
<td colspan="2">rij 4, kolom 1 en 2</td>
<td colspan="2">rij 4, kolom 3, 4</td>
</tr>
</table>
| rij 1, kolom 1 | rij 1, kolom 2 en 3 | rij 1, kolom 4 | |
| rij 2, kolom 1, 2 en 3 | rij 2, kolom 4 | ||
| rij 3, kolom 1 | rij 3, kolom 2 | rij 3, kolom 3 | rij 3, kolom 4 |
| rij 4, kolom 1 en 2 | rij 4, kolom 3, 4 | ||
Naast het horizontaal samenvoegen van cellen, kun je dit ook verticaal met behulp van rowspan. De werking is hetzelfde als colspan, maar dan in de andere richting. Dus rowspan="2" betekent dat er twee cellen verticaal worden samengevoegd. Ook nu laat je weer het juiste aantal <td>'s weg, maar dat is in dit geval wat ingewikkelder. Je moet deze namelijk uit verschillende <tr>'s gaan weglaten. Eerst een eenvoudig voorbeeld:
<tr>
<td rowspan="2">rij 1 en 2, kolom 1</td>
<td>rij 1, kolom 2</td>
<td>rij 1, kolom 3</td>
<td>rij 1, kolom 4</td>
</tr>
<tr>
<td>rij 2, kolom 2</td>
<td>rij 2, kolom 3</td>
<td>rij 2, kolom 4</td>
</tr>
<tr>
<td>rij 3, kolom 1</td>
<td>rij 3, kolom 2</td>
<td>rij 3, kolom 3</td>
<td>rij 3, kolom 4</td>
</tr>
</table>
| rij 1 en 2, kolom 1 | rij 1, kolom 2 | rij 1, kolom 3 | rij 1, kolom 4 |
| rij 2, kolom 2 | rij 2, kolom 3 | rij 2, kolom 4 | |
| rij 3, kolom 1 | rij 3, kolom 2 | rij 3, kolom 3 | rij 3, kolom 4 |
In dit voorbeeld heeft de tweede rij een <td> minder om plaats te laten voor de samengevoegde cel die in de eerste rij is ingesteld. Ook hier kun je dit weer in meerdere kolommen tegelijkertijd doen:
<tr>
<td rowspan="2">rij 1 en 2, kolom 1</td>
<td>rij 1, kolom 2</td>
<td>rij 1, kolom 3</td>
<td rowspan="3">rij 1, 2 en 3, kolom 4</td>
</tr>
<tr>
<td rowspan="2">rij 2 en 3, kolom 2</td>
<td>rij 2, kolom 3</td>
</tr>
<tr>
<td>rij 3, kolom 1</td>
<td>rij 3, kolom 3</td>
</tr>
</table>
| rij 1 en 2, kolom 1 | rij 1, kolom 2 | rij 1, kolom 3 | rij 1, 2 en 3, kolom 4 |
| rij 2 en 3, kolom 2 | rij 2, kolom 3 | ||
| rij 3, kolom 1 | rij 3, kolom 3 |
Combinaties van het verticaal en horizontaal samenvoegen van cellen is ook mogelijk. Toegegeven, het wordt er niet overzichtelijker van, maar als je het wil kan het dus wel:
<tr>
<td colspan="2">rij 1, kolom 1 en 2</td>
<td rowspan="3">rij 1, 2 en 3, kolom 3</td>
<td colspan="2">rij 1, kolom 4 en 5</td>
</tr>
<tr>
<td rowspan="3">rij 2, 3 en 4, kolom 1</td>
<td>rij 2, kolom 2</td>
<td>rij 2, kolom 4</td>
<td rowspan="4">rij 2, 3, 4 en 5, kolom 5</td>
</tr>
<tr>
<td>rij 3, kolom 2</td>
<td>rij 3, kolom 4</td>
</tr>
<tr>
<td colspan="2" rowspan="2">rij 4 en 5, kolom 2, 3</td>
<td>rij 4, kolom 4</td>
</tr>
<tr>
<td>rij 5, kolom 1</td>
<td>rij 4, kolom 4</td>
</tr>
</table>
| rij 1, kolom 1 en 2 | rij 1, 2 en 3, kolom 3 | rij 1, kolom 4 en 5 | ||
| rij 2, 3 en 4, kolom 1 | rij 2, kolom 2 | rij 2, kolom 4 | rij 2, 3, 4 en 5, kolom 5 | |
| rij 3, kolom 2 | rij 3, kolom 4 | |||
| rij 4 en 5, kolom 2, 3 | rij 4, kolom 4 | |||
| rij 5, kolom 1 | rij 4, kolom 4 | |||
Speciale elementen voor tabellen
Naast <table> , <tr> en <td> bestaan er in HTML nog een paar elementen die als onderdeel van een tabel gebruikt kunnen worden. Dit zijn <th> , <thead>, <tbody> en <tfoot>.
<th> (table heading) wordt gebruikt om koppen in je tabel aan te geven. Deze worden standaard door de browser vetgedrukt weergegeven. Je gebruikt <th> als een vervanging van <td> daar waar je koppen wilt gebruiken: typisch in de eerste rij en/of de eerste kolom.
<tr>
<th>kolom 1</th>
<th>kolom 2</th>
<th>kolom 3</th>
<th>kolom 4</th>
</tr>
<tr>
<td>rij 2, kolom 1</td>
<td>rij 2, kolom 2</td>
<td>rij 2, kolom 3</td>
<td>rij 2, kolom 4</td>
</tr>
<tr>
<td>rij 3, kolom 1</td>
<td>rij 3, kolom 2</td>
<td>rij 3, kolom 3</td>
<td>rij 3, kolom 4</td>
</tr>
</table>
| kolom 1 | kolom 2 | kolom 3 | kolom 4 |
|---|---|---|---|
| rij 2, kolom 1 | rij 2, kolom 2 | rij 2, kolom 3 | rij 2, kolom 4 |
| rij 3, kolom 1 | rij 3, kolom 2 | rij 3, kolom 3 | rij 3, kolom 4 |
Hierboven zagen we een voorbeeld met koppen boven iedere kolom. Hieronder een voorbeeld met koppen aan het begin van iedere rij:
<tr>
<th>rij 1</th>
<td>rij 1, kolom 2</td>
<td>rij 1, kolom 3</td>
<td>rij 1, kolom 4</td>
</tr>
<tr>
<th>rij 2</th>
<td>rij 2, kolom 2</td>
<td>rij 2, kolom 3</td>
<td>rij 2, kolom 4</td>
</tr>
<tr>
<th>rij 3</th>
<td>rij 3, kolom 2</td>
<td>rij 3, kolom 3</td>
<td>rij 3, kolom 4</td>
</tr>
</table>
| rij 1 | rij 1, kolom 2 | rij 1, kolom 3 | rij 1, kolom 4 |
|---|---|---|---|
| rij 2 | rij 2, kolom 2 | rij 2, kolom 3 | rij 2, kolom 4 |
| rij 3 | rij 3, kolom 2 | rij 3, kolom 3 | rij 3, kolom 4 |
<thead>, <tbody> en <tfoot> hebben niet direct een visueel resultaat. Ze kunnen je wel helpen om later de opmaak van je tabel via CSS makkelijker te maken of om de inhoud- en weergave van de tabel via JavaScript te beïnvloeden. <thead> is bedoeld om de rij met kolomkoppen in op te nemen. <tfoot> is bedoeld om bijvoorbeeld een rij met totalen helemaal onderaan de tabel in op te nemen. <thead> en <tfoot> kunnen, maar hoeven niet allebei in dezelfde tabel voor te komen. Gebruik je één of beide, dan moeten de rest van de rijen in de tabel opgenomen worden in <tbody>. In een voorbeeld ziet dit er als volgt uit:
<thead>
<tr>
<th></th>
<th>Januari</th>
<th>Februari</th>
<th>Maart</th>
</tr>
</thead>
<tbody>
<tr>
<th>Boodschappen</th>
<td>36,95</td>
<td>13,37</td>
<td>69,78</td>
</tr>
<tr>
<th>Uit eten</th>
<td>0,00</td>
<td>100,00</td>
<td>7,95</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Totaal</th>
<td>36,95</td>
<td>113,37</td>
<td>77,73</td>
</tr>
</tfoot>
</table>
| Januari | Februari | Maart | |
|---|---|---|---|
| Boodschappen | 36,95 | 13,37 | 69,78 |
| Uit eten | 0,00 | 100,00 | 7,95 |
| Totaal | 36,95 | 113,37 | 77,73 |
Website opmaken met tabellen
Tabellen zijn er voor om informatie gestructureerd weer te geven. Ze zijn er niet voor om de layout van je website op te bouwen. Dat doe je met CSS!
HTMLboek ©2018 Jasper Vries.
HTMLboek mag vrij gebruikt worden, zie de pagina Licentie voor meer informatie.
Deze pagina is het laatst bijgewerkt op 15-07-2018.
htmlboek.net