Een tabel gebruik je om gegevens in rijen en kolommen weer te geven.

www x

Table Basics

Een tabel bestaat uit 3 belangrijke onderdelen:

• <table>: de volledige tabel
• <tr>: een rij (table row)
• <td>: een cel (table data)

<table border="1">
  <!-- 1e rij -->
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>

  <!-- 2e rij -->
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>

  <!-- 3e rij -->
  <tr>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Je kunt de HTML van buiten naar binnen lezen:

1. <table border="1">: start van de tabel
2. <tr>: start van een rij
3. <td>Cell 1</td>: de 1e cell in de rij
4. <td>Cell 2</td>: de 2e cell in de rij
5. </tr>: het einde van de rij
6. </table>: het einde van de tabel

Je kan het zien als:

TABLE <table>
│
├── ROW <tr>
│   ├── CELL <td>
│   └── CELL <td>
│
├── ROW <tr>
│   ├── CELL <td>
│   └── CELL <td>
│
└── ROW <tr>
    ├── CELL <td>
    └── CELL <td>

Border

border="1" zorgt ervoor dat je randen rond de tabel en cellen ziet:

www x

Zonder het border attribute krijg je geen randen te zien:

www x

Ik raad aan om tijdens het opbouwen van een tabel steeds een border te gebruiken. Zo kun je duidelijk zien hoe de rijen en cellen van je tabel worden opgebouwd.

Header

Vaak heeft een tabel bovenaan een header. Die vertelt wat de gegevens in de kolommen betekenen.

Daarvoor gebruik je <th>, dit betekent table header.

www x

<table border="1">
  <tr>
    <th>Naam</th>
    <th>Vak</th>
  </tr>

  <tr>
    <td>Maes</td>
    <td>Webtechnology</td>
  </tr>

  <tr>
    <td>Vermeulen</td>
    <td>Software Development</td>
  </tr>
</table>

Oefening

Basis

Maak deze tabel met 2 kolommen en 4 rijen:

www x

Voeg een header toe:

www x

Breid de tabel uit met een derde kolom:

www x

Nu krijg je een nog grotere dataset:

www x

Uitbreiding

Werk verder aan dezelfde table en gebruik colspan om een rij over meerdere kolommen te laten lopen.

<th colspan="4">Internet Hall of Fame</th>

www x

Zoek zelfstandig uit hoe je rowspan kunt gebruiken om een cel over meerdere rijen te laten lopen, zoals ik hieronder bij de cell internet gedaan heb.

www x

Table Puzzles

Maak deze tables exact na

De Halve Piramide:

www x

De Brug:

www x

De Toren:

www x

De Trap:

www x

De Hele Piramide:

www x

Table Puzzles Oplossingen

<table border="1">
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>a</td>
    <td rowspan="3">b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>f</td>
    <td>g</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td colspan="2">e</td>
  </tr>
  <tr>
    <td colspan="3">f</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>f</td>
    <td colspan="3">g</td>
    <td>h</td>
  </tr>
  <tr>
    <td colspan="5">i</td>
  </tr>
</table>

Overzicht