06. tabellen (html)

rijen en kolommen (html)

In HTML kan informatie getoond worden in tabellen. Tabellen maken het mogelijk om complexe data visueel overzichtelijk weer te geven. Je kan een tabel in HTML maken met het <table> element. Een tabel bestaat uit rijen die aangemaakt worden met het <tr> element (table row) en kolommen in deze rijen met het <td> element (table data). De <td> elementen definiëren dus de cellen van de tabel. Het td element staat dus altijd binnen het tr element en niet andersom. De tabel wordt dus rij per rij opgebouwd.

Op deze manier kunnen we al een simpele tabel opstellen:

<table>
    <tr>
        <td>linksboven</td>
        <td>rechtsboven</td>
    </tr>
    <tr>
        <td>linksonder</td>
        <td>rechtsonder</td>
    </tr>
</table>

We kunnen aan onze tabel een titel toevoegen binnen het caption element en een hoofding toevoegen door gebruik te maken van het <th> element (table head) i.p.v. het <td> element. De titel kan een titel van ofwel een kolom of van een rij zijn. Om ervoor te zorgen dat tabellen toegankelijk zijn voor gebruikers van apparaten zoals schermlezers wordt het scope attribuut van de th gebruikt. Het scope attribuut geeft aan of er een bepaalde kop is aangebracht.

kop bij een kolom (col)

<th scope="col">dagen</th>

kop bij een rij (row)

<th scope="row">overzicht</th>

titel (html)

Je kan ook nog een titel toevoegen aan je tabel met het caption element. Het caption element moet altijd als eerste element binnen het table element staan.

<table>
    <caption>Opbrengst de warmste week</caption>
    <tr>
        <th scope="col">dagen</th>
        <th scope="col">Zaterdag</th>
        <th scope="col">Zondag</th>
        <th scope="col">Totaal</th>
    </tr>
    <tr>
        <th scope="row">Tickets:</th>
        <td>110</td>
        <td>140</td>
        <td>250</td>
    </tr>
    <tr>
        <th scope="row">Inkomsten:</th>
        <td>660</td>
        <td>850</td>
        <td>1450</td>
    </tr>
    <tr>
        <th scope="row">Uitgaven:</th>
        <td>260</td>
        <td>400</td>
        <td>850</td>
    </tr>
</table>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_caption_test

semantische tabellen (html)

thead

De kolomkoppen van de tabel moet je in het element thead zetten. We hebben tot nu toe iets over het hoofd gezien, namelijk semantisch aangeven dat de eerste rij de koptekst van de tabel is. Die hele eerste rij bevat geen gegevens, het zijn de koptitels van kolommen. We kunnen dat doen met het thead element, waarin de eerste tr is opgenomen. Het kunnen er zoveel rijen zijn als je maar wilt.

tbody

De body, de eigenlijke gegevens, staat in het element tbody.

tfoot

Gebruik tfoot wordt gebruikt om content in de footer van een HTML-tabel te groeperen.

<table>
    <caption>Inkomsten tabel</caption>
    <thead>
        <tr>
            <th>Datum</th>
            <th>Inkomsten</th>
            <th>Uitgaven</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1 mei</th>
            <td>300</td>
            <td>200</td>
        </tr>
        <tr>
            <th>2 mei</th>
            <td>350</td>
            <td>150</td>
        </tr>
        <tr>
            <th>3 mei</th>
            <td>400</td>
            <td>350</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Totaal</th>
            <td>1050</td>
            <td>700</td>
        </tr>
    </tfoot>
</table>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody

cellen samenvoegen (html)

Het is mogelijk om cellen meerdere rijen of kolommen te laten innemen met de colspan en rowspan attributen. Opeenvolgende cellen kunnen dus zowel in horizontale als in verticale richting worden samengevoegd. Voor het samenvoegen in verticale richting gebruik je het rowspan attribuut van het td of het th element, voor het samenvoegen in horizontale richting het colspan attribuut. Dit wordt op volgende manier toegepast:

colspan

<table>
    <tr>
        <th></th>
        <th>9u</th>
        <th>10u</th>
        <th>11u</th>
        <th>12u</th>
    </tr>
    <tr>
        <th>Maandag</th>
        <td colspan="2">Netwerken</td>
        <td>Linux</td>
        <td>Webtech</td>
    </tr>
    <tr>
        <th>Dinsdag</th>
        <td colspan="3">Webtech labo</td>
        <td>IT-esentials</td>
    </tr>
</table>

try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colspan

rowspan

<table>
    <tr>
        <th>Lokaal:</th>
        <th>-01.006</th>
        <th>-01.007</th>
        <th>-01.008</th>
    </tr>
    <tr>
        <th>18-19h</th>
        <td rowspan="3">Linux</td>
        <td rowspan="2">Webtech</td>
        <td>IT-essentials</td>
    </tr>
    <tr>
        <th>19-20h</th>
        <td rowspan="2">Elektronica</td>
    </tr>
    <tr>
        <th>20-21h</th>
        <td>communicatie</td>
    </tr>
</table>

try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_rowspan

Een goede tabel bestaat uit een head, body en foot. Deze worden gedefinieerd door de thead , tbody en tfoot elementen. In de head zet je alle titels van de kolommen, in body de data, en in foot de opsomming van de data in de cellen.

<table>
    <thead>
        <tr>
            <th>Datum</th>
            <th>Inkomsten</th>
            <th>Uitgaven</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1 mei</th>
            <td>300</td>
            <td>200</td>
        </tr>
        <tr>
            <th>2 mei</th>
            <td>350</td>
            <td>150</td>
        </tr>
        <tr>
            <th>3 mei</th>
            <td>400</td>
            <td>350</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Totaal</th>
            <td>1050</td>
            <td>700</td>
        </tr>
    </tfoot>
</table>

tabellen opmaken in html

Alvorens het bestaan van CSS werden websites opgemaakt met behulp van tabellen. Er waren dus enkele attributen voorzien voor het opmaken van tabellen in de HTML-standaarden voor HTML5. Sinds HTML5 zijn deze attributen echter verwijderd. Toch worden ze nog gebruikt in toepassingen zoals e-mail campagnes omdat de meeste e-mail clients geen CSS ondersteunen.

oefening tabellen html

oefening met tabellen (html)