|
Handleiding HTML  Legenda | Voorbeelden | Tabellen | CSS eigenschappen | Begin
border-collapse
|
De border-collapse eigenschap bepaalt of een tabel wordt weergegeven met gescheiden of met samenvallende tabelranden.
CSS kent twee modellen voor de weergave van tabelranden: het model voor gescheiden tabelranden en het model voor samenvallende tabelranden. De keuze tussen deze modellen wordt gemaakt met de border-collapse eigenschap.
Voorbeeld:
border-collapse: collapse
|
collapse
|
De waarde collapse zorgt ervoor dat bij de weergave van de tabel uitgegaan wordt van het model voor samenvallende tabelranden. Bij dit model kunnen (in tegenstelling tot bij het model voor gescheiden tabelranden) ook kolommen, kolomgroepen, rijen en rijgroepen een rand hebben. Er kunnen dus niet alleen stijlen gedefinieerd worden voor de randen van de elementen TABLE, TD en TH, maar ook voor die van de elementen COL, COLGROUP, TR, THEAD, TBODY en TFOOT. Zoals de naam van het model al aangeeft, vallen de randen van tabelonderdelen samen op plaatsen waar ze bij elkaar komen. Er is dus geen sprake van ruimte tussen de randen en een eventueel opgenomen border-spacing eigenschap wordt dan ook genegeerd door de browser. Ook de empty-cells eigenschap heeft geen effect bij het model voor samenvallende tabelranden.
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:
- Randen waarvoor de border-style eigenschap de waarde hidden heeft, winnen het van alle andere randen. Dat betekent dat er geen rand weergegeven wordt, zodra er voor één van de samenvallende randen border-style: hidden geldt.
- Randen waarvoor de border-style eigenschap de waarde none heeft, hebben de laagste prioriteit. Pas als de border-style eigenschap van alle samenvallende randen de waarde none heeft, blijft de rand achterwege. Omdat none de beginwaarde van de border-style eigenschap is, kun je dus ook zeggen dat er een rand wordt weergegeven zolang er voor één van de samenvallende randen een stijl is gedefinieerd met een andere waarde voor de border-style eigenschap dan none (dat geldt uiteraard niet als op basis van de eerste regel een rand met border-style: hidden de weergave tegenhoudt).
- Bredere randen winnen het van smallere randen: de hoogste waarde voor de border-width eigenschap die geldt voor de samenvallende randen, wordt aangehouden.
- Wanneer samenvallende randen een gelijke waarde hebben voor de border-width eigenschap, dan wordt de waarde van de border-style eigenschap bepalend. De zwaarste stijl wint en de volgorde die daarbij aangehouden wordt is in afnemende zwaarte: double, solid, dashed, dotted, ridge, outset, groove en inset.
- Als voor samenvallende randen alleen de kleur verschilt, dan wordt het tabelonderdeel waarvoor de stijl geldt bepalend. De cel wint het van alle andere tabelonderdelen, daarna volgen achtereenvolgens de rij, de rijgroep, de kolom, de kolomgroep en de tabel.
|
separate
|
De waarde separate zorgt ervoor dat de tabel wordt weergegeven op de wijze zoals dat standaard in HTML gebeurt: op basis van het model voor gescheiden tabelranden. Bij dit model hebben alleen de tabel zelf en de afzonderlijke cellen randen. Wanneer je stijlen definieert voor de randen van andere elementen dan TABLE, TD en TH (dus bijvoorbeeld voor COL, COLGROUP, TR, THEAD, TBODY, of TFOOT) dan moet de browser deze negeren. De randen van aan elkaar grenzende cellen en de randen van cellen en de tabel zijn van elkaar gescheiden. In de meeste browsers standaard door een tussenruimte van 2 pixels, maar door de border-spacing eigenschap op te nemen voor het TABLE element kan deze ruimte ook breder of smaller gemaakt worden. Met de empty-cells eigenschap kun je bepalen of lege cellen wel of niet moeten worden weergegeven.
|
inherit
|
De waarde van het parent element wordt aangehouden.
|
Bijzonderheden ondersteuning
- Microsoft Internet Explorer 5.0 en hoger
- - Bij de waarde collapse vallen de randen alleen samen, als het CELLSPACING attribuut van het TABLE element niet is opgenomen of de waarde nul heeft. Wanneer het CELLSPACING attribuut wel is opgenomen en een andere waarde heeft dan nul, wordt weliswaar slechts één rand weergegeven tussen de cellen onderling en tussen een cel en de buitenrand van de tabel, maar wordt daarnaast de standaard tussenruimte van 2 pixels weergegeven. Als voor alle tabelelementen dezelfde achtergrondkleur geldt, lijkt het daardoor of de randen toch samenvallen.
- - Ook bij de waarde collapse worden slechts stijlen ondersteunt voor de randen van de elementen TABLE, TD en TH. Stijlen voor de randen van de elementen COL, COLGROUP, TR, THEAD, TBODY, of TFOOT hebben dus geen effect.
- - Indien bij de waarde collapse voor zowel de tabel als de cellen een stijl voor de rand is gedefinieerd, dan worden de regels voor de oplossing van conflicten niet aangehouden. De rand van de tabel wordt altijd weergegeven in de stijl die voor het TABLE element is gedefinieerd.
- Opera 4.0 t/m 6.0
- - De waarde inherit heeft effect, maar niet zoals bedoeld. Een tabel waarvoor de waarde is opgenomen, wordt altijd weergegeven met gescheiden tabelranden (ongeacht of voor het parent element de waarde separate of collapse geldt). De ruimte tussen de randen wordt daarbij terug gebracht tot 0 pixels.
Legenda | Voorbeelden | Tabellen | CSS eigenschappen | Begin
Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 16 januari 2005
|
