# Tabellen

# Gebruik tabellen

Een tabel wordt gebruikt voor het weergeven van een verzameling gegevens op een pagina. Deze data kan worden ingedeeld in rijen en kolommen. In vroegere tijden, vooral tijdens de hoogdagen van HTML 4, werden tabellen ook gebruikt voor de lay-out van een pagina te bepalen, maar dit is onder HTML 5 taboe. De lay-out wordt immers verzorg via CSS.

Een tabel in HTML bestaat uit een eenvoudige opsomming van rijen en cellen. Er wordt dus niet rechtstreeks gebruik gemaakt van "kolommen", hoewel ze wel zo zullen getoond worden op een pagina.

Het element <table> leidt de tabel in. Binnen dit element worden rijen opgenomen met het element <tr>. Binnen een rij volgt een opsomming van cellen via het element <td>. Je kan zoveel cellen opnemen binnen een rij als je wil, zolang elke rij bestaat uit hetzelfde aantal cellen (en dus kolommen).

Bekijk de volgende tabel:

Om de rijen en cellen in een HTML-tabel te gieten ziet de code er als volgt uit:

<table>
    <tr>
        <td>Maandag</td>
        <td>Zonnig</td>
        <td>Regenachtig</td>
    </tr>
    <tr>
        <td>Dinsdag</td>
        <td>Regen en hagel</td>
        <td>Opklaringen</td>
    </tr>
    <tr>
        <td>Woensdag</td>
        <td>Mistig</td>
        <td>Zonnig</td>
    </tr>
</table>

De tabellen in dit hoofdstuk werden ter illustratie van de concepten rij, hoofding, cel, ... voorzien van enige CSS-opmaak.

# Hoofdingen

Om een tabel van hoofdingen te voorzien gebruik je het element <th> als cellen binnen een hoofdingenrij (in de plaats van <td>. Voor de hoofdingenrij gebruik je een gewoon <tr> element.

Om de bovenstaande tabel verder uit te werken met hoofdingen voegen we het volgende toe aan de tabel, boven de bestaande rijen:

<tr>
    <th>Dag</th>
    <th>Weer ochtend</th>
    <th>Weer avond</th>
</tr>

# Cellen samenvoegen

Cellen kunnen ook samengevoegd worden om één groot inhoudsblok te vormen. Hiervoor gebruik je bij een cel de attributen rowspan (verticaal samenvoegen) en colspan (horizontaal samenvoegen). De waarde voor de attributen bepaalt hoeveel cellen er samengevoegd worden. De ontbrekende cellen moeten dan ook niet opgenomen worden in de tabel.

We breiden de bovenstaande tabel verder uit met samengevoegde cellen:

<tr>
    <td>Donderdag</td>
    <td colspan="2">Zonnig</td>
</tr>
<tr>
    <td>Vrijdag</td>
    <td colspan="2" rowspan="2">Geen voorspellingen</td>
</tr>
<tr>
    <td>Weekend</td>
</tr>

# Semantische indeling

Om een tabel beter leesbaar te maken voor schermlezers en zoekmachines kunnen we ze indelen in drie onderdelen:

1. <thead>: semantisch element voor de hoofdingsrij.
2. <tbody>: semantisch element voor de datarijen.
3. <tfoot>: semantisch element voor de voetrij.

Verder kan een tabel ook voorzien worden van een semantische titel, die ook zichtbaar is voor de gebruiker. Hiervoor gebruiken we het element <caption>. Het volgt meestal als eerste kindelement van het hoofdelement <table>.

Bekijk de volgende tabel:

Om deze tabel na te maken en in te delen in de verschillende semantische elementen gebruiken we de volgende HTML-code:

<table>
    <caption>Puntentabel leerlingen</caption>
    <thead>
        <tr>
            <th>Naam</th>
            <th>Geschiedenis</th>
            <th>Engels</th>
            <th>Wiskunde</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tim</td>
            <td>7</td>
            <td>9</td>
            <td>6</td>
        </tr>
        <tr>
            <td>Aïsha</td>
            <td>9</td>
            <td>5</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Hans</td>
            <td>8</td>
            <td>8</td>
            <td>6</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Klasgemiddelde</th>
            <td>8</td>
            <td>7,3</td>
            <td>7</td>
        </tr>
    </tfoot>
</table>