HTML 5

Tabellen

In HTML maak kun je tabellen weergeven met de 'table'-tag. In het verleden werden tabellen gebruikt om een website vorm te geven, maar tegenwoordig wordt de 'table'-tag alleen nog gebruikt waar hij ook oorspronkelijk voor bedoeld is. Namelijk het weergeven van tabulaire informatie.

De structuur van een tabel start met een 'table'-tag. Verder bestaat een tabel uit rijen en (data)cellen. Hieronder een voorbeeld van een simpele tabel:

<table>
<tr>
<th>Groen</th><th>Rood</th>
</tr>
<tr>
<td>komkommer</td><td>tomaat</td>
</tr>
</table>

Hieronder het resultaat in de browser:

GroenRood
komkommertomaat

Uitleg:

Een tabel in HTML lijkt wel wat op een spreadsheet. Je kunt ook cellen samenvoegen... Met het attribuut colspan kun je aangeven dat een data-cel over meerdere kolommen gaat.

<table>
<tr>
<th colspan="2">Groente</th>
</tr>
<tr>
<td>komkommer</td><td>tomaat</td>
</tr>
</table>
Groente
komkommertomaat

Met het rowspan-attribuut kun je een cel over meerdere rijen laten gaan....

<table>
<tr>
<th rowspan="2">Groente</th><td>komkommer</td>
</tr>
<tr>
<td>tomaat</td>
</tr>
</table>
Groentekomkommer
tomaat

Hieronder zowel colspan als rowspan toegepast..

<table>
<th>
<td colspan="2">Tabel</td>
</th>
<tr>
<th rowspan="2">Groente</th><td>komkommer</td>
</tr>
<tr>
<td>tomaat</td>
</tr>
</table>
Tabel
Groentekomkommer
tomaat

Opdracht 7.1 Zelf tabellen maken.

Maak minimaal 3 tabellen na van de tabellen die je hier kunt downloaden:
Tabellen downloaden

In de video's wordt uitgelegd hoe je tabellen maakt en er wordt een complexe tabel geanalyseerd en nagebouwd: