Tabellen in HTML

Gepubliceerd op 30 december 2019 Leestijd : 4 minuten

Met UL, OL en LI maak je opsommingen. Met DL, DT en DD maak je lijsten van definities. Naast opsommingen en definities is er ook nog tabulaire data: gegevens die in een tabel staan, waarbij je rijen hebt waarin waardes van verschillende types in hun eigen kolom staan. In HTML gebruik je hiervoor de TABLE-tag met de verscheidene bijbehorende elementen.

Simpele tabel

Een tabel is in beginsel een rij waarbij verschillende soorten waardes in aparte kolommen staan. De waardes in de kolommen hebben te maken met die specifieke rij. De waarde in één kolom zal van een ander type zijn dan de waarde van een andere kolom. Alles in de kolom kleur is een kleur en is anders dan wat in de kolom gereedschap staat, maar "Eerste auteur" is nog steeds een ander soort waarde dan "Tweede auteur", ook al zijn het beide auteurs.

Tabellen in HTML zijn eenvoudig op te bouwen, maar bieden uitgebreide mogelijkheden. Een eenvoudige tabel heeft simpelweg wat rijen en kolommen. Een rij is een TR (table row) en een kolom in een rij is een cell of TD (table data).

<table>
  <tr>
    <td>P110</td><td>10 kg</td><td>10 cm</td>
  </tr>
  <tr>
    <td>P200</td><td>11 kg</td><td>20 cm</td>
  </tr>
</table>

P110	10 kg	10 cm
P200	11 kg	20 cm

Dit is tabulaire data, per rij gaat het over één object en elke kolom is een apart soort waarde. In het bovenstaande voorbeeld zie je echter niet om wat voor gegevens het gaat en het is dus niet informatief.

Headers en footers

Om de kolommen en rijen beschrijvender te maken, kan je gebruik maken van THEAD, TBODY en TFOOT: header, body en footer van een tabel. In de header en footer kan je informatie opgeven over de tabel of over de specifieke kolommen, zoals de naam van de kolom of een totaalwaarde. Deze elementen worden direct onder TABLE geplaatst en in de elementen komt de data.

<table>
        <thead>
                <tr>
                        <th>SKU</th><th>Gewicht</th><th>Breedte</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <th>P110</th><td>10 kg</td><td>10 cm</td>
                </tr>
                <tr>
                        <th>P200</th><td>11 kg</td><td>20 cm</td>
                </tr>
        </tbody>
        <tfoot>
                <tr>
                        <th>Totaal</th><td>21 kg</td><td>30 cm</td>
                </tr>
                <tr>
                        <th>Gemiddelde</th><td>10,5 kg</td><td>15 cm</td>
                </tr>
        </tfoot>
</table>

Resultaat:

SKU	Gewicht	Breedte
P110	10 kg	10 cm
P200	11 kg	20 cm
Totaal	21 kg	30 cm
Gemiddelde	10,5 kg	15 cm

TH

Het is nu duidelijk wat de waardes vertegenwoordigen. In het voorbeeld is tevens het element TH gebruikt, dit staat voor table header. Hiermee geef je aan per kolom of rij dat de betreffende cel een header is en waarmee je de rij of kolom kan identificeren.

Geavanceerde tabellen

Dit is een eenvoudige tabel, maar er zijn meer mogelijkheden om je tabel beter te laten passen bij je data en om deze beschrijvender te maken, zoals:

Tabellen als layout

In het begin van het web was het lastig om je pagina op te maken zoals je wilde en was een van de manieren om elementen te positioneren TABLE. De ingesloten elementen zijn mooi op elkaar uitgelijnd en je kan ze centreren of juist niet. Dit was een logische keuze toentertijd, maar sindsdien zijn er alternatieven geïntroduceerd, zoals DIV en CSS met verschillende layout-mogelijkheden (flex of grid). Dit heeft ertoe geleid dat TABLEs niet meer gebruikt werden, sterker nog, tabulaire data wordt soms als DIV met display: table; gepresenteerd. Dat is niet juist: Tabellen zij uitermate geschikt voor tabulaire data. Tegenwoordig zijn deze ook goed responsive te stylen.