Handleiding HTML - CSS en tabellen

CSS		CSS en tabellen

Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Tabelranden

Standaard hebben tabellen in HTML geen rand. Wanneer je wel een rand wilt, dan moet je het BORDER attribuut opnemen voor het TABLE attribuut met een andere waarde dan "0". Er worden dan randen geplaatst om elke cel en om de tabel. De breedte van de buitenrand van de tabel wordt beïnvloedt door de waarde van het BORDER attribuut. Voor het aanpassen van de breedte van de rand om de cel biedt HTML geen mogelijkheden. De randen worden uitgevoerd in 3-D, in onderstaande afbeelding is dat goed zichtbaar bij BORDER="4"

Voorbeelden BORDER attribuut

De ruimte tussen de verschillende randen is in de meeste browsers standaard 2 pixels breed. Je kunt de breedte beïnvloeden door het opnemen van het CELLSPACING attribuut voor het TABLE element. Wanneer je CELLSPACING="0" opneemt, verdwijnt de tussenruimte en worden de randen tegen elkaar aan geplaatst.

Voorbeelden CELLSPACING attribuut

De kleur van de tabelranden kun je in HTML bepalen, door het opnemen van de attributen BORDERCOLOR, BORDERCOLORLIGHT en BORDERCOLORDARK voor de elementen TABLE, TR, TD of TH. Bij deze attributen gaat het om toevoegingen van Microsoft Internet Explorer, die niet ondersteund worden door andere browsers en bovendien ook geen deel uitmaken van HTML 4.0.

Met CSS heb je veel meer mogelijkheden om te bepalen hoe de browser de randen van een tabel moet weergeven, dan met alleen HTML. De eigenschappen voor randen kun je gebruiken, om de breedte, de stijl en de kleur van de rand van de tabel en/of de cellen vast te leggen. Je kunt dat doen met de afzonderlijke eigenschappen border-width, border-style en border-color, maar ook met de gecombineerde border eigenschap. Met de genoemde eigenschappen kun je de stijl van alle randen tegelijk vastleggen, maar ook aparte stijlen voor elk van de vier randen. Wanneer je slechts voor één of enkele randen een stijl wilt definiëren, dan heb voor elk van de genoemde eigenschappen een rand-gebonden versie tot je beschikking. Bijvoorbeeld border-top-width, border-bottom-width, border-left-width en border-right-width.

In enkele voorbeelden worden de genoemde mogelijkheden gedemonstreerd met behulp van de volgende tabel:

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

In een stijlblok in de head van het document zijn voor de elementen TABLE en TD met de eigenschappen border-width en border-style stijlregels opgenomen, waarmee de breedte en de stijl van de randen worden vastgelegd. Omdat de border-color eigenschap niet is gebruikt om de kleur van de randen vast te leggen, zal de browser hiervoor de beginwaarde aanhouden. Dat is de waarde van de color eigenschap die voor het element geldt, of als deze niet gedefinieerd is de voorgrondkleur die de browser normaal voor tekst gebruikt.

TABLE { border-width: 1px; border-style: solid; } TD { border-width: 1px; border-style: solid; text-align: center; width: 80px; }

In het volgende voorbeeld is de border-color eigenschap wel opgenomen.

TABLE { border-width: 1px; border-style: solid; border-color: #FF0000; } TD { border-width: 1px; border-style: solid; border-color: #336699; text-align: center; width: 80px; }

Hetzelfde resultaat krijg je, als je wanneer je in plaats van de eigenschappen border-width, border-style en border-color de gecombineerde border eigenschap gebruikt.

TABLE { border: 1px solid #FF0000; } TD { border: 1px solid #336699; text-align: center; width: 80px; }

In de vorige voorbeelden is met de waarde solid voor de border-style eigenschap steeds vastgelegd, dat een doorgaande vlakke rand moet worden gebruikt. Behalve de waarde solid kent de border-style eigenschap nog een aantal andere waarden, waarmee je kunt kiezen voor verschillende vlakke randen of randen in 3-D. Bijvoorbeeld de waarden outset en inset:

TABLE { border: 1px outset #C0C0C0; } TD { border: 1px inset #C0C0C0; text-align: center; width: 80px; }

Een overzicht van de verschillende stijlen die voor de rand gebruikt kunnen worden, wordt gegeven in het onderdeel Stijlen voor de rand.

Je kunt een 3-D effect ook bereiken, als je zelf wat met de kleuren van de verschillende randen speelt. In het volgende voorbeeld is de border-color gebruikt met vier waarden. Deze hebben achtereenvolgens betrekking op de randen boven, rechts, onder en links.

TABLE { border: 1px outset #336699; border-color: #E0E0E0 #606060 #606060 #E0E0E0; } TD { border: 1px inset #336699; border-color: #606060 #E0E0E0 #E0E0E0 #606060; text-align: center; width: 80px; }

Je hoeft niet dezelfde stijl voor alle randen te gebruiken, maar kun er ook één voor elke rand afzonderlijk definiëren. In het volgende voorbeeld is met de eigenschappen border-top-width en border-left-width vastgelegd, dat de linker- en bovenrand van de cellen breder moeten zijn dan de overige randen. Om te voorkomen dat het beeld erg rommelig wordt, is voor het TABLE element de border-style eigenschap met de waarde none opgenomen. Er wordt daardoor geen buitenrand voor de tabel weergegeven.

TABLE { border: none; } TD { border: 1px solid #336699; border-top-width: 2px; border-left-width: 2px; text-align: center; width: 80px; }

Modellen voor tabelranden

Naast de mogelijkheden voor de vormgeving van de randen van de tabel en de cellen biedt CSS de keuze uit twee verschillende modellen voor de weergave van tabelranden: het model voor gescheiden tabelranden en het model voor samenvallende tabelranden. De keuze voor het model wordt gemaakt met de border-collapse eigenschap.

Het model voor gescheiden randen komt overeen met de wijze waarop HTML tabelranden weergeeft. De belangrijkste kenmerken zijn:

Uitsluitend de tabel zelf en de afzonderlijke cellen kunnen een rand hebben. Alleen stijlen gedefinieerd voor de randen van de elementen TABLE, TD en TH hebben dus effect. Stijlen voor de randen van andere tabelelementen (COL, COLGROUP, TR, THEAD, TBODY en TFOOT) moet de browser negeren.
De verschillende randen worden van elkaar gescheiden door een ruimte, waarvan de breedte bepaald wordt met de border-spacing eigenschap.

Voor de eerder gebruikte voorbeeldtabel is in de stijlregel voor het TABLE element met de border-collapse eigenschap vastgelegd dat het gaat om een tabel met gescheiden randen. Met de border-spacing eigenschap is bepaald dat de ruimte tussen de randen 4 pixels moet bedragen.

TABLE { border-collapse: separate; border-spacing: 4px; border: 1px solid #C0C0C0; } TD { border: 1px solid #C0C0C0; text-align: center; width: 80px; }

Het model voor samenvallende tabelranden wijkt op een aantal punten af van de wijze waarop HTML tabelranden weergeeft:

Alle onderdelen van een tabel kunnen een rand hebben. Dat betekent dat er stijlen gedefinieerd kunnen worden voor alle elementen waaruit de tabel is opgebouwd (dus niet alleen voor TABLE, TD en TH, maar ook voor COL, COLGROUP, TR, THEAD, TBODY en TFOOT).
De randen die voor de verschillende elementen gedefinieerd zijn, vallen samen (of beter gezegd: worden op elkaar gestapeld) en er is daardoor geen sprake van een tussenruimte.

In het volgende voorbeeld is in de stijlregel voor het TABLE element met de border-collapse eigenschap vastgelegd dat het om een tabel met samenvallende randen gaat. Omdat zowel voor het TABLE element als het TD element een randbreedte van 1 pixel is gedefinieerd, hebben de samenvallende randen ook een breedte van 1 pixel.

TABLE { border-collapse: collapse; border: 1px solid #C0C0C0; } TD { border: 1px solid #C0C0C0; text-align: center; width: 80px; }

In de volgende onderdelen worden achtereenvolgens het model voor de gescheiden tabelranden en het model voor de samenvallende tabelranden meer in detail beschreven. Informatie over de verschillende stijlen die gebruikt kunnen worden voor tabelranden, wordt gegeven in het onderdeel Stijlen voor tabelranden

Vervolg: Gescheiden tabelranden

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