HTML | Tabellen

In deze blogpost leer ik je hoe je tabellen op je webpagina kunt creëren zodat je content een betere lay-out krijgt. Tabellen ken je waarschijnlijk al van programma's zoals Microsoft Excel. Het is een handige manier om je informatie overzichtelijk weer te geven.

Basis elementen van een tabel

<table>

Het table element gebruik je om een tabel te maken en bestaat uit een openings- en sluitingstag. Alle informatie die je tussen deze twee tags plaatst wordt in de tabel gezet. De content van de tabel wordt per rij geschreven.

<tr>

Het begin en einde van iedere rij wordt aangegeven door de <tr> en </tr> tag (tr staat voor table row). 

<td>

Td staat voor table data. Met <td> wordt iedere cel in een rij aangeduid. De content voor iedere cel plaats je tussen <td> en </td>.

<th>

Th gebruik je in plaats van <td> wanneer je een heading wilt plaatsen bovenaan de tabel. Het gebruik van <th> is aan te raden, want deze tag wordt gebruikt door screen readers, zoekmachines en het zorgt ervoor dat je tabel overzichtelijker is. Binnen de th-openingstag kun je het scope attribuut gebruiken om aan te geven of het een heading voor een kolom of rij is:

<th scope="row">

<th scope="col">

Opzet van een tabel

Hieronder een voorbeeld van de htmlcode voor een tabel met 4 rijen en 4 kolommen:

<table>

  <tr>

    <th scope="col">Heading 1</th>

    <th scope="col">Heading 2</th>

    <th scope="col">Heading 3</th>

    <th scope="col">Heading 4</th>

  </tr>

  <tr>

    <td>Rij 2, Cel 1</td>

    <td>Rij 2, Cel 2</td>

    <td>Rij 2, Cel 3</td>

    <td>Rij 2, Cel 4</td>

  </tr>

  <tr>

    <td>Rij 3, Cel 1</td>

    <td>Rij 3, Cel 2</td>

    <td>Rij 3, Cel 3</td>

    <td>Rij 3, Cel 4</td>

  </tr>

  <tr>

    <td>Rij 4, Cel 1</td>

    <td>Rij 4, Cel 2</td>

    <td>Rij 4, Cel 3</td>

    <td>Rij 4, Cel 4</td>

  </tr>

</table>

Bovenstaande code ziet er op een website als volgt uit:

Heading 1	Heading 2	Heading 3	Heading 4
Rij 2, Cel 1	Rij 2, Cel 2	Rij 2, Cel 3	Rij 2, Cel 4
Rij 3, Cel 1	Rij 3, Cel 2	Rij 3, Cel 3	Rij 3, Cel 4
Rij 4, Cel 1	Rij 4, Cel 2	Rij 4, Cel 3	Rij 4, Cel 4

De opmaak van bovenstaande tabel is nog erg simpel. Door middel van stylesheets (zoals CSS) kun je opmaak van een tabel ook veel professioneler aanpakken.