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

Standaard worden tabellen in HTML weergegeven met gescheiden tabelranden. Zowel de tabel zelf als de afzonderlijke cellen kunnen een rand hebben en tussen aangrenzende randen zit een ruimte die in de meeste browsers 2 pixels breed is. Om de randen te kunnen zien moet je in HTML voor het TABLE element het BORDER attribuut opnemen met een andere waarde dan "0" (zie ook het onderdeel Tabelranden). In het volgende voorbeeld is in plaats daarvan voor de elementen TABLE en TD een stijl voor de rand gedefinieerd met de border eigenschap. 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: 1px solid #C0C0C0; background-color: #FFFF99; }
TD    { border: 1px solid #C0C0C0; text-align: center; width: 80px;
        color: #000000; background-color: #99FFCC; }

In CSS kun je kiezen uit twee modellen voor de weergave van tabelranden. Allereerst is er het model voor gescheiden tabelranden, dat overeenkomt met de manier waarop in HTML tabellen worden weergegeven. Kenmerken van dit model zijn, zoals hiervoor aangegeven, dat alleen de tabel zelf en de afzonderlijke cellen een rand hebben en dat deze randen van elkaar gescheiden zijn. Als alternatief voor het model voor gescheiden tabelranden kun je ook gebruik maken van het model voor samenvallende tabelranden. In dat model kunnen alle onderdelen van de tabel een rand hebben, dus ook rijen, rijgroepen, kolommen en kolomgroepen. Op plaatsen waar de verschillende randen samen komen, zijn ze niet van elkaar gescheiden, maar worden ze boven elkaar geplaatst.

De keuze tussen de twee modellen maak je met de border-collapse eigenschap. Wanneer je, zoals in het volgende voorbeeld, deze eigenschap de waarde separate geeft, dan kies je voor gescheiden tabelranden. Omdat separate de beginwaarde is van de border-collapse eigenschap en er verder niets aan de stijlen is veranderd, moet de tabel er hetzelfde uitzien als die in het vorige voorbeeld.

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; }

Wanneer je de border-collapse eigenschap de waarde collapse geeft, dan kies je voor samenvallende tabelranden. In het volgende voorbeeld hebben de randen van de tabel en die van de cellen dezelfde randstijl, dezelfde kleur en een gelijke breedte van 1 pixel. Deze stijl wordt daarom ook aangehouden voor de samenvallende randen.

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

Omdat de randen van de diverse tabelonderdelen kunnen verschillen in breedte, stijl en kleur, zijn er in CSS een aantal regels vastgelegd, die bepalen hoe eventuele conflicten tussen de stijlen van samenvallende randen worden opgelost. Hierna worden daar enkele voorbeelden van gegeven. Een uitgebreidere toelichting is te vinden in het onderdeel Samenvallende tabelranden.

Eën van de regels is dat een zwaardere rand het wint van een lichtere rand. In het volgende voorbeeld bepaalt de stijl van het TABLE element daarom de breedte van de buitenrand van de tabel en wordt de stijl van het TR element aangehouden voor de randen tussen de rijen. De stijl van het TD element is alleen te zien tussen de cellen in een rij.

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

Wanneer de samenvallende randen een gelijke breedte hebben, dan wordt de zwaarte van de stijl bepalend. Van zwaar naar licht geldt daarbij als volgorde: double, solid, dashed, dotted, ridge, outset, groove en inset. In het volgende voorbeeld heeft het TABLE element de zwaarste stijl en deze wordt daarom aangehouden voor de buitenrand van de tabel. Voor de randen tussen de rijen trekt het TR element aan het langste eind en voor het TD element resten daarom opnieuw slechts de randen tussen de cellen in een rij.

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

Wanneer de samenvallende randen alleen in kleur verschillen (en dus een gelijke breedte en stijl hebben), dan wordt de kleur bepaald door het eerste onderdeel van de tabel in de volgende rij waarvoor een kleur gedefinieerd is: de cel, de rij, de rijgroep, de kolom, de kolomgroep en de tabel. In het volgende voorbeeld wint de kleur van de cel het van die van alle overige onderdelen en als gevolg daarvan zijn alle randen blauw.

TABLE { border-collapse: collapse; border: 2px solid #C0C0C0;
        background-color: #FFFF99; }
TD    { border: 2px solid #0099FF; text-align: center; width: 80px;
        color: #000000; background-color: #99FFCC; }
TR    { border: 2px solid #FF0000; }

Legenda | Beschrijving | Tabellen | CSS eigenschappen | Begin

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