Handleiding HTML Legenda | Beschrijving | Tabellen | CSS eigenschappen | Begin

Wanneer je gebruik maakt van het model voor gescheiden tabelranden (dat doe je als je de border-collapse niet hebt opgenomen voor het TABLE element, of als je hem hebt opgenomen met de waarde separate), dan houden de meeste browsers tussen de aangrenzende randen standaard een ruimte van 2 pixels aan. In het volgende voorbeeld is dat te zien. Voor de tabel is de volgende HTML-code opgenomen:

<TABLE>
<TR>
<TD>a1</TD><TD>a2</TD>
</TR>
<TR>
<TD>b1</TD><TD>b2</TD>
</TR>
</TABLE>

De stijlregels staan in een stijlblok in de head van het document:

TABLE { border-collapse: separate;
        border: 1px solid #C0C0C0; background-color: #FFFF99; }
TD    { border: 1px solid #C0C0C0; text-align: center; width: 80px;
        color: #000000; background-color: #99FFCC; }

Je kunt de breedte van de ruimte tussen de randen beïnvloeden door het opnemen van de border-spacing eigenschap voor het TABLE element. Wanneer je deze eigenschap één waarde geeft, dan geldt deze zowel in horizontale als in verticale richting.

TABLE { border-collapse: separate; border-spacing: 4px;
        border: 1px solid #C0C0C0; background-color: #FFFF99; }
TD    { border: 1px solid #C0C0C0; text-align: center; width: 80px;
        color: #000000; background-color: #99FFCC; }

Wanneer je twee waarden opneemt voor de border-spacing eigenschap, dan geldt de eerste in horizontale richting (dus voor de ruimte tussen de verticale randen) en de tweede in verticale richting (dus voor de ruimte tussen de horizontale randen).

TABLE { border-collapse: separate; border-spacing: 8px 4px;
        border: 1px solid #C0C0C0; background-color: #FFFF99; }
TD    { border: 1px solid #C0C0C0; text-align: center; width: 80px;
        color: #000000; background-color: #99FFCC; }

Wanneer je voor de border-spacing eigenschap de waarde 0px opneemt, dan verdwijnt de ruimte tussen de randen. De randen worden tegen elkaar aan geplaatst en vallen dus niet samen zoals bij het model voor samenvallende tabelranden. De totale breedte van de rand is de som van de afzonderlijke randen. Om dit goed zichtbaar te maken zijn in het volgende voorbeeld de randen 2 pixels breed gemaakt en heeft de rand van de tabel een andere kleur gekregen.

TABLE { border-collapse: separate; border-spacing: 0px;
        border: 3px solid #0099FF; background-color: #FFFF99; }
TD    { border: 3px solid #C0C0C0; text-align: center; width: 80px;
        color: #000000; background-color: #99FFCC; }

De breedte van de ruimte tussen de rand van een cel en die van de tabel kun je ook beïnvloeden door voor het TABLE element één of meer van de eigenschappen voor de padding op te nemen. Voorbeelden hiervan zijn te zien in het onderdeel Gescheiden tabelranden.

De border-spacing eigenschap heeft geen effect als je gebruik maakt van het model voor samenvallende tabelranden (dus als de waarde voor de border-collapse eigenschap collapse is), omdat er in dat geval geen sprake is van ruimte tussen de randen van de verschillende elementen.

Legenda | Beschrijving | Tabellen | CSS eigenschappen | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 16 januari 2005