HTML Tabellen: Gegevens overzichtelijk structureren

Als grafisch vormgever of front-end developer krijg je regelmatig te maken met informatie die in een strak, overzichtelijk raster gepresenteerd moet worden. Denk aan een prijslijst voor drukwerk, de specificaties van een nieuw papierformaat, een openingsschema of een vergelijkingstabel tussen verschillende abonnementen.

Om deze gegevens op een gestructureerde manier op een webpagina te tonen, gebruiken we HTML-tabellen. In deze les leer je de basis- en structuurtags van tabellen kennen (<table>, <tr>, <th>, <td>, <thead> en <tbody>) en ontdek je hoe je celoverkoepelende kolommen of rijen maakt.

---

1. Belangrijke vuistregel: Waarvoor gebruik je tabellen?

Voordat we naar de code kijken, is het belangrijk om één gouden regel te onthouden:

Gebruik HTML-tabellen UITSLEUTELEND voor tabelgegevens (data).

Gebruik tabellen nooit om de algemene lay-out van je webpagina te bouwen (zoals het positioneren van je navigatiemenu of artikelen). Voor pagina-layouts gebruiken we CSS (Flexbox of CSS Grid).

---

2. De basisbouwstenen van een tabel

Een HTML-tabel wordt opgebouwd in lagen, van buiten naar binnen:

1. <table>: De overkoepelende container die de hele tabel omsluit.
2. <tr> (Table Row): Bepaalt een horizontale rij in de tabel.
3. <td> (Table Data): Een individuele gegevenscel binnen een rij.

Basisvoorbeeld

Stel dat we een eenvoudige tabel willen maken met 2 rijen en 2 kolommen:

<table>
    <!-- Eerste rij -->
    <tr>
        <td>Formaat</td>
        <td>Afmetingen (mm)</td>
    </tr>
    <!-- Tweede rij -->
    <tr>
        <td>A4</td>
        <td>210 x 297</td>
    </tr>
</table>

---

3. Tabelkoppen toevoegen (<th>)

In het bovenstaande voorbeeld is het verschil tussen de titel van de kolom ("Formaat") en de data ("A4") niet zichtbaar in de code. Om de bovenste rij (of eerste kolom) als koptekst aan te duiden, vervangen we de <td> door een <th> (Table Header).

• De browser maakt de tekst in een <th> standaard vetgedrukt en gecentreerd.
• Het helpt schermlezers en zoekmachines te begrijpen welke data bij welke kop hoort.

<table>
    <tr>
        <!-- Gebruik th voor kopcellen -->
        <th>Druktechniek</th>
        <th>Oplage</th>
    </tr>
    <tr>
        <td>Digital print</td>
        <td>10 - 500 exemplaren</td>
    </tr>
    <tr>
        <td>Offset druk</td>
        <td>500+ exemplaren</td>
    </tr>
</table>

---

4. Semantische indeling: <thead> en <tbody>

Wanneer een tabel groter wordt, is het verstandig om de tabel logisch op te delen in een kopgedeelte en een inhoudsgedeelte. Hiervoor gebruiken we semantische containertags:

• <thead> (Table Head): Omsluit de rij(en) met de kolomkoppen.
• <tbody> (Table Body): Omsluit alle rijen met de feitelijke gegevens.
• <tfoot> (Table Footer): (Optioneel) Omsluit de onderste rij met bijvoorbeeld een totaalrekening of een samenvatting.

<table>
    <!-- Kopgedeelte van de tabel -->
    <thead>
        <tr>
            <th>Product</th>
            <th>Aantal</th>
            <th>Prijs (excl. btw)</th>
        </tr>
    </thead>

    <!-- Inhoud van de tabel -->
    <tbody>
        <tr>
            <td>Visitekaartjes (350g)</td>
            <td>500</td>
            <td>€ 45,00</td>
        </tr>
        <tr>
            <td>Flyers A5 (135g)</td>
            <td>1000</td>
            <td>€ 89,00</td>
        </tr>
    </tbody>
</table>

Tip: Het gebruik van <thead> en <tbody> maakt het in CSS later heel eenvoudig om bijvoorbeeld de koptekst een vaste achtergrondkleur te geven, of om lange tabellen beter te stylen!

---

5. Cellen samenvoegen (colspan & rowspan)

Soms wil je dat een specifieke cel meerdere kolommen of rijen beslaat (denk aan een titel die over de hele breedte van de tabel moet lopen). Dit doe je met speciale attributen op de <td> of <th> tag:

A. Horizontaal samenvoegen (colspan)

Met colspan="x" geeft je aan over hoeveel kolommen een cel moet uitstrekken (column span).

<table>
    <thead>
        <tr>
            <!-- Deze kop beslaat 2 kolommen -->
            <th colspan="2">Papierformaten ISO 216</th>
        </tr>
        <tr>
            <th>Naam</th>
            <th>Afmetingen</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A3</td>
            <td>297 x 420 mm</td>
        </tr>
    </tbody>
</table>

B. Verticaal samenvoegen (rowspan)

Met rowspan="x" geeft je aan over hoeveel rijen een cel moet uitstrekken (row span).

<table>
    <tr>
        <!-- Deze cel strekt zich uit over 2 rijen -->
        <rowspan="2">Afwerking</td>
        <td>Lamineren (Mat/Glans)</td>
    </tr>
    <tr>
        <td>Rillen & Plooien</td>
    </tr>
</table>

---

6. Een korte blik op CSS voor tabellen

Standaard zien HTML-tabellen er vrij sober uit en hebben ze ruimte tussen de celranden. Om van een HTML-tabel een strakke, professionele tabel te maken, gebruiken we CSS.

De belangrijkste CSS-eigenschap voor tabellen is border-collapse: collapse;, die dubbele randen samenvoegt tot één strakke lijn:

/* Basisstijlen voor een strakke tabel */
table {
    width: 100%;
    border-collapse: collapse; /* Samenvoegen van dubbele randen */
    font-family: sans-serif;
}

th, td {
    border: 1px solid #cbd5e1;
    padding: 12px;
    text-align: left;
}

th {
    background-color: #0f172a;
    color: #ffffff;
}

/* Om en om gekleurde rijen (zebra-striping) */
tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

---

Samenvatting

• <table>: De hoofdcontainer van de tabel.
• <tr>: Maakt een nieuwe rij aan.
• <th>: Gebruik je voor kopcellen (vetgedrukt en gecentreerd).
• <td>: Gebruik je voor gewone gegevenscellen.
• <thead> & <tbody>: Zorgen voor een semantische indeling van de kop en de inhoud.
• colspan: Voegt cellen horizontaal samen over meerdere kolommen.
• rowspan: Voegt cellen verticaal samen over meerdere rijen.
• Gebruik tabellen enkel voor gegevens/data, nooit voor de algemene lay-out van een website!