HTML Tabellen

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie tabellen | Eenvoudige tabellen | Samenvoegen cellen | Uitlijnen celinhoud | Uitlijnen tabel | Bijschrift bij tabel | Tabelranden | Achtergrond tabel | Rijgroepen | Kolomgroepen | Kader en lijnen | Voorrangsregels bij uitlijnen

Gerelateerde elementen: CAPTION | COL | COLGROUP | TABLE | TBODY | TD | TFOOT | TH | THEAD | TR


Kolomgroepen

Wanneer je de cellen in kolommen van bepaalde kenmerken wilt voorzien, dan kun je gebruik maken van de elementen COL en COLGROUP. Deze elementen doen in principe allebei hetzelfde: het groeperen van de kolommen in een tabel en/of het (met behulp van de verschillende attributen) in één keer geven van de gewenste kenmerken. Het COLGROUP element heeft daarnaast een functie in het structureren van de tabel (zie het onderdeel Kader en lijnen).

In het volgende voorbeeld wordt de weergave bepaald met de attributen van het COLGROUP element. Het ALIGN attribuut bepaalt de uitlijning van de inhoud van de cellen en het WIDTH attribuut bepaalt de breedte van de cellen. De eerste kolomgroep bestaat uit slechts één kolom, voor de volgende kolomgroep is met behulp van het SPAN attribuut de omvang bepaald op twee kolommen.

<TABLE BORDER="1">
<COLGROUP ALIGN="left" WIDTH="90">
</COLGROUP>
<COLGROUP SPAN="2" ALIGN="center" WIDTH="60">
</COLGROUP>
<TR>
<TD>a1</TD><TD>a2</TD><TD>a3</TD>
</TR>
<TR>
<TD>b1</TD><TD>b2</TD><TD>b3</TD>
</TR>
<TR>
<TD>c1</TD><TD>c3</TD><TD>c3</TD>
</TR>
</TABLE>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Voorbeeld kolomgroepen

Soms wil je bepaalde kolommen binnen een kolomgroep kenmerken geven, die afwijken van die van de rest van de kolomgroep. In het volgende voorbeeld geldt dat voor de laatste kolom van de tweede kolomgroep. Het COL element moet twee keer gebruikt worden. Voor beide COL elementen is het ALIGN attribuut opgenomen, dat de uitlijning van de tekst vastlegt. Let erop dat het COL element in tegenstelling tot het COLGROUP element geen beëindiging kent.

<TABLE BORDER="1">
<COLGROUP ALIGN="left" WIDTH="90">
</COLGROUP>
<COLGROUP SPAN="2" WIDTH="60">
<COL ALIGN="center">
<COL ALIGN="right">
</COLGROUP>
<TR>
<TD>a1</TD><TD>a2</TD><TD>a3</TD>
</TR>
...
</TABLE>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Voorbeeld kolomgroepen

Het aantal attributen dat beschikbaar is voor de opmaak van kolom(groep)en is heel beperkt en bovendien wordt niet elk attribuut door elke browser ondersteund. Eigenlijk moet je ervan uitgaan, dat alleen het (via het WIDTH attribuut) vastleggen van de breedte van de cellen in de kolom(men) door alle actuele browsers wordt ondersteund.
Ook met behulp van stylesheets heb je maar een beperkt aantal mogelijkheden de opmaak van de kolommen te beïnvloeden (zie het onderdeel CSS en tabellen - Kolommen). Daartoe behoren het vastleggen van de breedte en de achtergrond van de cellen in een kolom(groep).

<TABLE BORDER="1">
<COLGROUP CLASS="kg1">
</COLGROUP>
<COLGROUP SPAN="2" CLASS="kg2">
</COLGROUP>
<TR>
<TD>a1</TD><TD>a2</TD><TD>a3</TD>
</TR>
...
</TABLE>

In een stijlblok in de head van het document zijn de volgende stijlregels opgenomen:

.kg1 { width: 90px; background-color: #FFFF99; }
.kg2 { width: 60px; background-color: #FFFFCC; }

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Voorbeeld kolomgroepen


Vervolg: Kader en lijnen


Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 5 december 2004