Allereerst wil ik laten zien hoe cellen binnen een rij per kolom met elkaar kunnen worden verbonden. Hierdoor bereik je dat een kolom binnen de desbetreffende rij zich uitstrekt over meerdere kolommen.
Een voorbeeld:
<table border="1">
<tr>
<th colspan="2">Afspraken</th>
</tr>
<tr>
<td>11.4.2014</td>
<td>12.4.2012</td>
</tr>
<tr>
<td>13.4.2014</td>
<td>14.4.2014</td>
</tr>
<tr>
<td>15.4.2014</td>
<td>16.4.2014</td>
</tr>
</table>Vooraf nog een woord over het hier gebruikte th-element. Met dit element markeer je kopcellen. Browsers geven deze cellen doorgaans vetgedrukt en gecentreerd weer. En hier is het resultaat in de browser:
In het inleidende th wordt het attribuut colspan ingesteld. Als waarde wordt verwacht het aantal kolommen waarover de huidige cel zich moet uitstrekken. Let in elk geval op dat het opgegeven aantal kolommen klopt, anders kan dit leiden tot ongewenste resultaten. In het voorbeeld zou de met th gemarkeerde kopregel zich over twee kolommen moeten uitstrekken. Binnen de andere twee regels zijn dan ook weer respectievelijk twee cellen.
Nog een opmerking met betrekking tot het verbinden van rijen. Wijs tabellen tijdens de ontwikkelingsfase een rand (border) toe. Zo kun je altijd direct zien of het verbinden daadwerkelijk werkt zoals gewenst.
Cellen in een kolom rijsgewijs verbinden
Met het attribuut rowspan kunnen meerdere cellen in een kolom met elkaar worden verbonden. De desbetreffende cel strekt zich dan uit over meerdere rijen binnen de kolom. Ook hier weer een voorbeeld:
<table border="1">
<tr>
<th rowspan="2">Kleur</th>
<td>Blauw</td>
</tr>
<tr>
<td>Groen</td>
</tr>
<tr>
<th rowspan="2">Grootte</th>
<td>1,70</td>
</tr>
<tr>
<td>1,80</td>
</tr>
</table>In de browser ziet dat er als volgt uit:
Geef het rowspan-attribuut een numerieke waarde. Dit bepaalt uiteindelijk het aantal rijen binnen een kolom waarover een cel zich moet uitstrekken. Ook hier geldt natuurlijk weer dat het opgegeven aantal rijen daadwerkelijk correct moet zijn.
Cellen tegelijkertijd rij- en kolomsgewijs verbinden
De twee attributen rowspan en colspan kunnen overigens ook gecombineerd worden. Zo kunnen cellen gedefinieerd worden die zich tegelijkertijd over meerdere rijen en kolommen uitstrekken. Ook dat laat zich het beste weer aantonen aan de hand van een voorbeeld.
<table border="1">
<tr>
<th colspan="2" rowspan="2">Appartement</th>
<td>5 kamers</td>
</tr>
<tr>
<td>154 m²</td>
</tr>
<tr>
<td>Charlottenburg</td>
<td>Parkeerplaats</td>
<td>Vloerverwarming</td>
</tr>
</table>
Een kijkje in de browser toont het volgende resultaat:
Bij de combinatie van de twee attributen is natuurlijk ook zorgvuldigheid geboden, zodat uiteindelijk het aantal cellen ook daadwerkelijk klopt.
Tabellen labelen
Een zeer interessante manier om tabellen begrijpelijker te maken, is met het caption-element. Hiermee kan een titel of legende aan een tabel worden toegevoegd. De inhoud van caption wordt dan telkens buiten de tabel weergegeven, hoewel de definitie ervan in de tabel plaatsvindt.
Hier een typische toepassing voor caption:
Boven de tabel wordt een tabelkop weergegeven. Standaard is de kop boven de tabel gecentreerd. Dit kan natuurlijk individueel worden aangepast met behulp van CSS.
Het caption-element wordt direct achter de inleidende <table> gedefinieerd.
Hier de volledige syntaxis van het eerder getoonde voorbeeld:
<table border="1">
<caption>Media-gegevens</caption>
<colgroup><col /><col /><col /><colgroup>
<thead>
<tr>
<th>Onderwerp</th>
<th>Weergaven</th>
<th>Trend</th>
</tr>
<thead>
<tfoot>
<tr>
<td colspan="3">Stand juni 2014</td>
</tr>
<tfoot>
<tbody>
<tr>
<td>HTML5</td>
<td>12.245</td>
<td>+</td>
</tr>
<tr>
<td>CSS3</td>
<td>12123</td>
<td>+</td>
</tr>
<tr>
<td>JavaScript</td>
<td>11.546</td>
<td>+</td>
</tr>
</tbody>
</table>Tabellen opmaken
Voor het opmaken van tabellen bestonden er in eerdere HTML-versies talrijke attributen. Hier zijn enkele voorbeelden van zaken die geregeld konden worden met behulp van attributen. (Natuurlijk ondersteunen de browsers deze attributen vandaag de dag nog steeds. In HTML5 dienen deze echter niet meer te worden gebruikt).
• Buitenkader
• Binnenste tafelkaders
• Breedte- en hoogte-aanduidingen
• Roosterranden
• Uitlijning van de celinhoud
• Kleuren
• Achtergrond afbeeldingen
Je ziet dat eigenlijk alles kan worden geregeld via de juiste HTML-attributen. Het onderstaande voorbeeld toont een tabel waarin deze mogelijkheden uitgebreid zijn benut:
<table border="1">
<tr>
<td width="200" height="100" bgcolor="#999933">Eén</td>
<td width="200" bgcolor="#00ffff">Twee</td>
<td width="200">Drie</td>
</tr>
<tr bgcolor="#ff00ff">
<td height="100">Vier<</td>
<td bgcolor="#996666">Vijf</td>
<td bgcolor="#003333">Zes</td>
</tr>
</table>
Het bekijken van het resultaat geeft het gewenste effect.
Maar zelfs als het er zo uitziet als het zou moeten zijn, is de achterliggende syntaxis allesbehalve effectief. Het is beter om de tabel eigenschappen te sturen met behulp van CSS. Dankzij nieuwe CSS-eigenschappen kunnen niet alleen de oude attributen worden vervangen door moderne syntaxis. Ook aanvullende functionaliteiten zijn haalbaar. Zo kunnen bijvoorbeeld tabelrijen tegenwoordig heel eenvoudig afwisselend worden gekleurd.
In vroegere HTML- en CSS-tijden moesten er soms enorme codeverminkingen worden gemaakt voor zo'n resultaat. Als men nu consequent de mogelijkheden benut die CSS tegenwoordig biedt, is zoiets heel eenvoudig te realiseren.
tr:nth-child(even) {
background-color: #fd9d5d;
}
tr:nth-child(odd) {
background-color: #c0f390;
}
table {
border-spacing: 0px;
}
Zoals al herhaaldelijk beschreven, zal ik uitgebreid ingaan op CSS binnen deze serie.
