Tabellen in HTML
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.
