# HTML Table

In deze oefeningen leer je een tabel maken en leer je de atrtibuten *colspan* en *rowspan* gebruiken.

### Inleiding

Maak de volgende tabel in HTML en zorg ervoor dat de tabel correct is.

Gebruik <table border=1> en controleer of alles cellen netjes omlijnt zijn.

##### goed

<table border="1" id="bkmrk-aaa-bbb-ccc-ddd-eee-"><tbody><tr><td>aaa</td><td>bbb</td><td>ccc</td></tr><tr><td>ddd</td><td>eee</td><td>fff</td></tr></tbody></table>

##### fout

<table border="1" id="bkmrk-aaa-bbb-ccc-ddd-aaa-"><tbody><tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr><tr><td>aaa</td><td>bbb</td></tr></tbody></table>

Je kunt je html table code ook controleren met:

[https://wet-boew.github.io/wet-boew-legacy/v3.1/demos/tableparser/validator-htmltable.html](https://wet-boew.github.io/wet-boew-legacy/v3.1/demos/tableparser/validator-htmltable.html)

### Opgave 1

Maak de volgende tabel

[![image-1662913109107.png](https://www.roc.ovh/uploads/images/gallery/2022-09/scaled-1680-/image-1662913109107.png)](https://www.roc.ovh/uploads/images/gallery/2022-09/image-1662913109107.png)

### Opgave 2

Verander de headers *Voornaam* en *Achternaam* en maak daar één cel van en noem die N*aam*.

<span style="background-color: #fbeeb8;">Tip</span>: maak gebruik van de td attribuut *colspan (*google zoektermen: **html colspan**).

[![image-1662913260381.png](https://www.roc.ovh/uploads/images/gallery/2022-09/scaled-1680-/image-1662913260381.png)](https://www.roc.ovh/uploads/images/gallery/2022-09/image-1662913260381.png)

### Opgave 3

Voeg een regel toe

[![image-1662913615331.png](https://www.roc.ovh/uploads/images/gallery/2022-09/scaled-1680-/image-1662913615331.png)](https://www.roc.ovh/uploads/images/gallery/2022-09/image-1662913615331.png)

en combineer dan de klas op de tweede en derde regel

<span style="background-color: #fbeeb8;">Tip</span>: maak gebruik van de td attribuut *rowspan**.***

[![image-1662913513038.png](https://www.roc.ovh/uploads/images/gallery/2022-09/scaled-1680-/image-1662913513038.png)](https://www.roc.ovh/uploads/images/gallery/2022-09/image-1662913513038.png)

---

<small>Table code in code &lt;&gt; of this page.</small>

<div id="bkmrk-naam-klas-ayoub-ter-" style="display: none;"><table border="1"><tbody><tr><th colspan="2">Naam</th><th>Klas</th></tr><tr><td>Ayoub</td><td>ter Horst</td><td>2F</td></tr><tr><td>Jamila</td><td>Brous</td><td>2F</td></tr><tr><td>Anja</td><td>de Bruin</td><td>2E</td></tr></tbody></table>

</div>