Tabelen zijn vrij complexe structuren die bestaan uit rijen en kolommen. Het uiterlijke basisframe van tabellen wordt altijd gevormd door het table-element.
<table> … </table>
Binnen dit element vindt de daadwerkelijke definitie van de tabel plaats. Het is overigens raadzaam om bij het maken van een tabel in HTML een rand aan de tabel toe te wijzen. Op die manier kunt u beter zien hoe rijen en kolommen precies lopen. Hiervoor kent u aan het initiërende <table> de attribuut-waarde combinatie border="1" toe. (Let op, het border-attribuut mag in HTML niet worden gebruikt. In plaats daarvan wordt gebruik gemaakt van de bijbehorende CSS-eigenschappen. Hierover later meer).
<table border="1"> … </table>
Vervolgens begint u met het definiëren van de tabelrijen. Dit gebeurt met het element tr.
<table border="1"> <tr></tr> </table>
Dit zorgt echter nog niet voor de gewenste output. Vervolgens moet u namelijk de kolommen definiëren. Dit gebeurt opnieuw met het td-element.
<table border="1">
<tr>
<td></td>
</tr>
</table>Daarna kunt u de eerste inhoud van de tabel definiëren. Dat doet u tussen <td> en </td>.
<table border="1">
<tr>
<td>Inhoud 1</td>
</tr>
</table>
Nu is het tijd om het resultaat in de browser te bekijken.
Het is nog niet bijzonder spectaculair, aangezien de tabel op dit moment slechts uit één tabelcel bestaat. U kunt nu nog een extra kolom toevoegen. Dit gebeurt opnieuw met een td-element. Zorg ervoor dat u dit binnen het tr-element definieert.
<table border="1">
<tr>
<td>Inhoud 1</td>
<td>Inhoud 2</td>
</tr>
</table>
Ook hier weer een blik op het resultaat.
Om extra rijen aan de tabel toe te voegen, maakt u eenvoudigweg een nieuw tr-element aan, waarin vervolgens de gewenste td-elementen worden gedefinieerd.
Hier is nogmaals een voorbeeld:
<table border="1">
<tr>
<td>Inhoud 1</td>
<td>Inhoud 2</td>
</tr>
<tr>
<td>Inhoud 3</td>
<td>Inhoud 4</td>
</tr>
</table>
Een blik op het resultaat in de browser toont het volgende resultaat:
Op deze manier kunt u dus ook uitgebreide tabellen maken.
Kop, lichaam en voet instellen
Tabellen kunnen worden onderverdeeld in logische secties. Dit omvat een kop-, een of meerdere databereiken en een voetgedeelte. Het volgende voorbeeld laat zien hoe zoiets eruit kan zien:
<table border="1">
<thead>
<tr>
<th>Vertrek</th>
<th>Aankomst</th>
<th>Perron</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Berlijn</td>
<td>Stralsund</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlijn</td>
<td>Hamburg</td>
<td>1</td>
</tr>
<tr>
<td>München</td>
<td>Berlijn</td>
<td>3</td>
</tr>
</tbody>
</table>En hier een kijkje naar het resultaat in de browser:
Deze verdeling in genoemde secties heeft blijkbaar geen optisch effect. Natuurlijk rijst dan de vraag: Waarom zou men dan de moeite nemen om deze secties te definiëren? Daar zijn twee goede redenen voor:
• Met behulp van CSS kunnen de secties indien gewenst verschillend opgemaakt worden.
• Browsers kunnen bij het afdrukken van lange tabellen de tabelkop en voet op elke pagina herhalen.
De tabelkop wordt geïnitieerd met thead. Daarop volgen de rijen van de tabel die bij de kopsectie horen. Vergeet niet de kopsectie </thead> te sluiten.
Als de tabel een tabelvoet moet krijgen, moet deze absoluut vóór het tabellichaam worden gedefinieerd. Het begin van de voet is met <tfoot>. Hierop kan weer een of meerdere rijen volgen die bij de voetsectie horen. Met </tfoot> sluit u de tabelvoet af.
Het eigenlijke tabellichaam wordt gedefinieerd binnen het tbody-element. Dit tbody kan meerdere keren voorkomen. Een tabellichaam wordt telkens afgesloten met </tbody>.
Waarom zou u bijvoorbeeld meerdere tbody-elementen in een tabel gebruiken? Een mooi voorbeeld hiervan zou de tabel van de Bundesliga zijn. In een dergelijke tabel zijn er meestal meerdere secties.
• Kampioen
• Deelnemers Champions League
• Champions League-kwalificanten
• Deelnemers Europa League
• Het grijze middenveld
• Play-off plek
• Degradanten
Voor elk van deze secties zou u deze in een eigen tbody-element kunnen plaatsen en vervolgens met CSS anders kunnen vormgeven.
Vooraf gedefinieerde kolommen
Hoe de tabel door de browsers wordt weergegeven, hangt natuurlijk voornamelijk af van het aantal rijen en kolommen. Het proces om een tabel weer te geven, is echter niet zo eenvoudig voor de browser. In feite moet een browser altijd de hele tabel eerst inlezen voordat hij de tabel kan weergeven. Vooral bij zeer omvangrijke tabellen kan dit natuurlijk enige tijd in beslag nemen. Dit probleem kan worden omzeild door de browser direct te laten weten uit hoeveel kolommen de tabel daadwerkelijk bestaat.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Titel</th>
<th>Prijs</th>
</tr>
<tr>
<td>23223423434</td>
<td>Een korte geschiedenis van bijna alles</td>
<td>29,95 euro</td>
</tr>
</table>
Met colgroup wordt de vooraf gedefinieerde kolominformatie ingeleid. Let erop dat de meeste attributen die in eerdere versies van HTML beschikbaar waren voor colgroup, nu niet meer zijn toegestaan in HTML5. Van die attributen is nu alleen het span-attribuut toegestaan. Dit span verwacht als waarde het aantal kolommen dat in de tabel zit.
Het colgroup-element staat direct achter de openings-tag <table>. De kolommen zelf worden dan gedefinieerd door de afzonderlijke col-elementen.
Bij het gebruik van colgroup heeft men principieel twee mogelijkheden:
• Met span-attribuut
• Zonder span-attribuut
Indien er geen span-attribuut wordt gebruikt, moet binnen het colgroup-element voor elke kolom die de kolomgroep moet bestrijken, telkens een col-element worden gedefinieerd. Let er daarbij op dat col een standalone element is.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Titel</th>
<th>Prijs</th>
</tr>
<tr>
<td>23223423434</td>
<td>Een korte geschiedenis van bijna alles</td>
<td>29,95 euro</td>
</tr>
</table>
Er is overigens ook een hybride vorm.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Dit is altijd handig wanneer een kolom apart moet worden gedefinieerd, maar de andere in een groep moeten worden samengevoegd.
