web2 logo

Tabellen

Tabellen kunnen er zeer complex uitzien, de mogelijke basisstructuur:
<table>
<!-- caption -->
<caption>Titel voor de tabel over de volle breedte</caption>
<!-- colgroup -->
<colgroup>
<col span="aantalKolommen" style="stijleigenschappen">
</colgroup>
<!-- table head -->
<thead>
<tr>
<th>kolomkop1</th>
<th>kolomkop2</th>
<th>kolomkop3</th>
</tr>
</thead>
<!-- table body -->
<tbody>
<tr>
<td>tekstOfWaarde1</td>
<td>tekstOfWaarde2</td>
<td>tekstOfWaarde3</td>
</tr>
<tr>
<td>tekstOfWaarde4</td>
<td>tekstOfWaarde5</td>
<td>tekstOfWaarde6</td>
</tr>
</tbody>
<!-- table footer -->
<tfoot>
<tr>
<td>tekst1</td>
<td>tekst2</td>
<td>tekst3</td>
</tr>
</tfoot>
</table>
Met colgroup kun je een aantal kolommen een specifieke opmaak geven.
Met span bepaal je het aantal kolommen dat je wenst samen te nemen, maar je kan de span er ook weglaten en die pas later aan een col-element toevoegen.
De colgroup-container moet ofwel meteen na de caption komen, ofwel meteen na de table wanneer je geen caption gebruikt. Bovendien moet de colgroup steeds voor de thead komen.
Bij de lege tag col geef je met het span-attribuut aan hoeveel kolommen je uit een tabel wil groeperen.
In style geef je de opmaakkenmerken voor die kolommen weer. De volgorde van de kolommen in de tabel is dezelfde als de volgorde van de col-elementen. Een voorbeeld met een tabel met 4 kolommen:
<colgroup>
<col "span=2" style="...">
<!-- Eerste twee kolommen -->
<col style="...">
<!-- Derde kolom -->
</colgroup>
De vierde kolom die hier niet apart vermeld wordt krijgt dan de standaard opmaak.

Toegevoegd door: Kees de Keijzer
Twitter: @kdkq

~ html ~

~ Onderwerpen ~

Dit is een website zonder pop-ups

~ Links ~

Design & Development by Cyberwebdesign.nl for web2.nl © 2020.