CSS CSS en tabellen


Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie CSS en tabellen | Tabelranden | Gescheiden tabelranden | Samenvallende tabelranden | Stijlen voor tabelranden | Achtergrond tabel | Uitlijnen celinhoud | Kolommen | Verbergen kolommen en rijen | Afmetingen tabel | Uitlijnen tabel | Bijschrift bij tabel | Inline tabellen | Tabellen zonder tabelelementen


Afmetingen tabel

In dit onderdeel wordt toegelicht hoe browsers de breedte en hoogte van een tabel bepalen en hoe je hier invloed op kunt uitoefenen. Achtereenvolgens wordt ingegaan op de tabel met automatische lay-out, op de tabel met de vaste lay-out, op de hoogte van cellen, rijen en de tabel en op de afmetingen van kolommen en rijen.

In de voorbeelden wordt gebruik gemaakt van een tabel, die is opgebouwd met de volgende HTML-code:

<TABLE>
<TH CLASS="cel1 links">product</TH><TH CLASS="cel2">aantal</TH><TH CLASS="cel3">prijs</TH><TH CLASS="cel4">totaal</TH>
</TR>
<TR>
<TD CLASS="links">1</TD><TD>873</TD><TD>10,05</TD><TD>8.773,65</TD>
</TR>
...
</TABLE>

De inhoud van de cellen en het aantal rijen varieert per voorbeeld.

Voor de tabel gelden een aantal basisstijlen, die zijn vastgelegd in een stijlblok in de head van het document:

TABLE  { border: 1px solid #C0C0C0; border-spacing: 2px;}
TD, TH { border: 1px solid #C0C0C0; vertical-align: top;
         padding-left: 3px; padding-right: 3px; }
TD     { text-align: right; }
.links { text-align: left; }

Naast de basisstijlen worden in het stijlblok afhankelijk van het voorbeeld één of meer specifieke stijlregels opgenomen.


Automatische lay-out

Standaard worden tabellen weergegeven volgens de methode van de automatische lay-out. Bij deze methode hangt de breedte van de tabel af van de inhoud van de cellen, van de ruimte die beschikbaar is tussen de marges van het parent element en van de eventueel voor de tabel, de cellen en/of de kolommen vastgelegde breedtes.

In eerste instantie zal de browser proberen elke cel die breedte te geven, die nodig is om de gehele inhoud op één regel te plaatsen. De breedte van elke kolom wordt daardoor bepaald door de cel in die kolom, die de grootste breedte vraagt. Wanneer de breedte die de kolommen samen nodig hebben kleiner is dan de voor de tabel beschikbare breedte, dan kan de browser de tabel weergeven.

Voorbeeld afmetingen tabel

Als de breedte die de kolommen samen nodig hebben groter is dan die welke voor de tabel beschikbaar is, dan zal de browser proberen de kolommen zoveel te versmallen dat de tabel zijn maximale breedte krijgt. In de cellen waar de inhoud na het versmallen niet meer op één regel past, worden de benodigde overgangen naar een nieuwe regel ingevoegd.

Voorbeeld afmetingen tabel

Wanneer het niet mogelijk is de kolommen zoveel te verkleinen dat de tabel past in de beschikbare ruimte, dan moet de browser de tabel noodgedwongen breder maken. Als daardoor een deel van de tabel buiten het frame of venster valt, zal de browser een horizontale schuifbalk weergeven.

Voorbeeld afmetingen tabel

Met de width eigenschap kun je de breedte vastleggen van een cel, een kolom, of de hele tabel. De browser zal deze breedte (anders dan bij andere elementen) interpreteren als een minimum en niet als een harde maat.

Als in het stijlblok wordt vastgelegd dat de eerste cel op de eerste rij een breedte moeten hebben van 55 pixels, dan zal de browser deze maat aanhouden als de inhoud van de cellen dat mogelijk maakt.

.cel1  { width: 55px; }

Voorbeeld afmetingen tabel

Als de inhoud van de cellen echter meer ruimte vraagt dan past binnen de opgegeven breedte, dan vergroot de browser de breedte van de betreffende kolom. Om dit te laten zien, is de titel van de eerste kolom aangepast.

Voorbeeld afmetingen tabel

Als in het stijlblok wordt vastgelegd dat de tabel een breedte moet hebben van 220 pixels, zal de browser proberen deze te realiseren door het op de gebruikelijke manier versmallen van de kolommen (dus door het invoegen van overgangen naar een nieuwe regel).

TABLE  { width: 220px;}

Voorbeeld afmetingen tabel

Wanneer de inhoud van de cellen onvoldoende mogelijkheden biedt tot het versmallen van de kolommen, wordt de breedte van de tabel zoveel als nodig is vergroot. Om dit te laten zien, is opnieuw de titel van de eerste kolom aangepast.

Voorbeeld afmetingen tabel


Vaste lay-out

De table-layout eigenschap met de waarde fixed kun je gebruiken, als je wilt dat de browser een lange tabel snel weergeeft in een vaste lay-out. De browser wacht dan niet totdat de minimale breedte van elke kolom is berekend op basis van de inhoud van alle cellen in die kolom, maar laat de lay-out alleen afhangen van de opgegeven breedte van de tabel, de opgegeven breedte van de kolommen (of bij het ontbreken daarvan de opgegeven breedte van de cellen op de eerste rij) en de ruimte die ingenomen wordt door de randen en de ruimte tussen de randen.
Bij het bepalen van de lay-out doorloopt de browser een aantal stappen. Eerst wordt voor elke kolom nagegaan of er met de width eigenschap (via de elementen COL of COLGROUP) een breedte is vastgelegd. Wanneer dat zo is, dan zal de browser deze breedte aanhouden ongeacht de inhoud van de cellen in de betreffende kolom. Als voor bepaalde kolommen geen breedte is vastgelegd, dan kijkt de browser of er voor de cel op de eerste rij van die kolommen met de width eigenschap (via de elementen TD of TH) een breedte is vastgelegd. Is dat het geval, dan bepaalt de breedte van de cel (verhoogd met de padding en de randen) de breedte van de kolom. Is dat niet het geval, dan delen die kolommen de ruimte die overblijft als van de breedte van de tabel de breedte wordt afgetrokken van de kolommen waarvoor wel een breedte is vastgelegd. Wanneer de opgegeven breedte van de tabel groter is dan de som van de breedtes van de kolommen, dan wordt het verschil verdeeld over de kolommen.

Hierna worden de verschillende aspecten van de tabel met vaste lay-out aan de hand van een aantal voorbeelden gedemonstreerd. Meer voorbeelden zijn te zien bij de toelichting op de table-layout eigenschap.

Voor de tabel in het volgende voorbeeld is de table-layout eigenschap met de waarde fixed opgenomen. Het stijlblok bevat geen stijlregels voor de kolommen en dus gebruikt de browser de breedtes die voor de cellen op de eerste rij zijn vastgelegd.

TABLE  { table-layout: fixed; width: 240px;}
.cel1  { width: 55px; }
.cel2  { width: 40px; }
.cel3  { width: 40px; }
.cel4  { width: 60px; }

Voorbeeld afmetingen tabel

Wanneer je de table-layout eigenschap met de waarde fixed gebruikt, moet je wel zeker weten dat de inhoud van alle cellen past in de opgegeven breedtes. Als dat niet het geval is, zal het deel van de inhoud dat niet in de cel past over de rand doorlopen en de inhoud van de naastgelegen cel overlappen (onder meer in Mozilla en de laatste versies van Netscape Navigator), of onzichtbaar worden (in Microsoft Internet Explorer en de laatste versies van Opera).

Voorbeeld afmetingen tabel

Kolommen waarvoor geen breedte is vastgelegd, moeten de ruimte delen die overblijft als van de breedte van de tabel de breedte overige kolommen, de randen en de ruimte tussen de randen is afgetrokken. In het volgende voorbeeld is in het stijlblok alleen voor de tabel en de eerste cel op de eerste rij een breedte vastgelegd. Voor de drie overige cellen resteert in totaal (240 - (55 + 2x3) - 10x1 - 5x2 =) 159 pixels. Na aftrek van de padding is voor de inhoud van elke cel (53 - 2x3 =) 47 pixel beschikbaar.

TABLE  { table-layout: fixed; width: 240px;}
.cel1  { width: 55px; }

Voorbeeld afmetingen tabel

Wanneer voor de tabel een grotere breedte is vastgelegd dan de som van de breedtes van de kolommen, de randen en de ruimte tussen de randen, dan wordt het verschil over de kolommen verdeeld. In het volgende voorbeeld is voor de tabel een breedte van 265 pixels vastgelegd. De kolommen vragen in totaal (55 + 40 + 40 + 60 + 8x3 + 10x1 + 5x2 =) 239 pixels. Het verschil bedraagt 26 pixels en de kolommen worden gemiddeld met 6 à 7 pixels vergroot.

TABLE  { table-layout: fixed; width: 265px;}
.cel1  { width: 55px; }
.cel2  { width: 40px; }
.cel3  { width: 40px; }
.cel4  { width: 60px; }

Voorbeeld afmetingen tabel

Als er geen breedte is vastgelegd voor de tabel, dan wordt voor de table-layout eigenschap niet de in het stijlblok vastgelegde waarde fixed aangehouden, maar de waarde auto. De tabel wordt dan op de in HTML gebruikelijke manier weergegeven: voor de eerste kolom wordt uitgegaan van de opgegeven breedte van de cel en de overige kolommen worden zo breed, dat de inhoud van de cellen precies past.

TABLE  { table-layout: fixed; }
.cel1  { width: 55px; }

Voorbeeld afmetingen tabel

Mozilla, Firefox, Netscape Navigator (vanaf versie 6.0) en Opera (vanaf versie 5.1) houden zich aan de hiervoor beschreven aanpak bij het ontbreken van een breedte voor de tabel. Microsoft Internet Explorer hanteert daarentegen een (door CSS 2.1 voor tabellen op blokniveau overigens toegestaan) ander uitgangspunt: de breedte van de laatste drie kolommen wordt bepaald volgens de regels die gelden voor de waarde fixed en daarbij wordt als breedte voor de tabel de ruimte aangehouden, die beschikbaar is tussen de marges van het parent element. Het gevolg kan zijn dat de tabel soms veel breder wordt dan gezien de inhoud nodig is. Om dit soort onbedoelde effecten te voorkomen, is het verstandig de table-layout eigenschap met de waarde fixed alleen te gebruiken als ook de breedte van de tabel wordt vastgelegd.


De hoogte van cellen, rijen en de tabel

Als je de height eigenschap opneemt voor een TD of TH element, dan leg je de minimum hoogte van de cel vast. De browser zal proberen deze hoogte aan te houden, maar als de inhoud van de cel en de (met de eigenschappen voor de padding vastgelegde) ruimte tussen de inhoud en de rand bij elkaar meer ruimte vragen, dan wordt de hoogte automatische vergroot. In het volgende voorbeeld is dat te zien bij de cellen op de derde rij

TABLE  { width: 220px; }
TD, TH { height: 30px; }

Voorbeeld afmetingen tabel


Als je de height eigenschap opneemt voor het TR element, dan leg je een hoogte vast voor de rij. Ook deze wordt weer gehanteerd als minimum. Wat de werkelijke hoogte wordt, hangt af van de hoogte en de verticale uitlijning van de inhoud van de cellen op de rij.
In het volgende voorbeeld zorgt de inhoud van de eerste cel ervoor, dat de derde en vierde rij hoger worden dan is vastgelegd in het stijlblok. Voor de tweede cel van de vierde rij is met een inline stijl vastgelegd, dat de tekst extra groot moet worden weergegeven. Omdat de vertical-align eigenschap met de waarde baseline is opgenomen voor de elementen TD en TH, moet de tekst van de eerste regel van elke cel op een rij op dezelfde basislijn geplaatst worden. De plaats van de basislijn wordt bepaald door de tekst met de hoogste box en boven de eerste regel van de andere cellen wordt een extra padding toegevoegd. De vierde rij wordt daardoor nog eens verder vergroot.

TABLE  { width: 220px; }
TR     { height: 30px; }
TD, TH { vertical-align: baseline; }

Voorbeeld afmetingen tabel


De hoogte van een tabel waarvoor de height eigenschap niet is opgenomen (en dus de waarde auto heeft), is de som van de rijhoogten, de randen en de ruimte tussen de randen. Wanneer de height eigenschap wel is opgenomen en een andere waarde dan auto heeft, dan wordt deze waarde door de verschillende browsers als minimum gehanteerd. Als de vastgelegde tabelhoogte groter is dan de som van de rijhoogten, de randen en de ruimte tussen de randen, dan wordt de hoogte van de rijen door het toevoegen van extra padding in de cellen zo vergroot, dat de tabel de gewenste hoogte krijgt.

TABLE  { width: 220px; height: 100px; }

Voorbeeld afmetingen tabel

Als de som van de rijhoogten, de randen en de ruimte tussen de randen groter is dan de met de height eigenschap vastgelegde tabelhoogte, dan wordt de tabel automatisch zoveel als nodig is vergroot.

Voorbeeld afmetingen tabel


Afmetingen van kolommen en rijen

Wanneer je afmetingen vastlegt voor kolommen of rijen, dan moet je er rekening mee houden dat de verschillende browsers daar niet op dezelfde manier mee omgaan. In afbeeldingen wordt dat hierna gedemonstreerd voor zowel een tabel met samenvallende tabelranden, als een tabel met gescheiden tabelranden. Voor deze tabellen zijn de volgende stijlregels aangehouden:

TABLE  { border: solid 7px #999999; border-spacing: 4px; }
TR     { border: solid 7px #999999; padding: 8px; }

Om de breedte van de drie kolommen te kunnen vastleggen, is voor elk een COL element opgenomen. Als waarden voor de width eigenschap zijn achtereenvolgens 100, 120 en 140 pixels aangehouden. Voor de rij is de hoogte met de height eigenschap bepaald op 50 pixels.


In Mozilla, Firefox en Netscape Navigator 6.0 en hoger (bij de tabel met samenvallende tabelranden 7.0 en hoger) is de weergave:

Afmetingen kolommen en rijen in Mozilla

  samenvallende tabelranden gescheiden tabelranden
kolombreedte de opgegeven breedte heeft betrekking op de som van de breedte van de celinhoud, de padding links en rechts en de helft van de randen links en rechts de opgegeven breedte heeft betrekking op de som van de breedte van de celinhoud, de padding links en rechts en de celranden links en rechts
rijhoogte de opgegeven hoogte heeft betrekking op de som van de hoogte van de celinhoud, de padding boven en beneden en de helft van de randen boven en beneden de opgegeven hoogte heeft betrekking op de som van de hoogte van de celinhoud, de padding boven en beneden en de celranden boven en beneden


In Opera 7.0 en hoger is de weergave:

Afmetingen kolommen en rijen in Opera

Opera 7.0 en hoger hanteert voor de kolombreedte een niet erg logische berekeningswijze, die leidt tot een iets bredere tabel dan bij Mozilla.

  samenvallende tabelranden gescheiden tabelranden
kolombreedte de breedte van de tabel is gelijk aan de som van de opgegeven kolombreedtes verminderd met de meest linkse en meest rechtse rand de breedte van de tabel is gelijk aan de som van de opgegeven kolombreedtes verminderd met de tabelranden links en rechts, de linkerrand van de meest linkse cel, de rechterrand van de meest rechtse cel en tweemaal de border-spacing.
rijhoogte de opgegeven hoogte heeft betrekking op de som van de hoogte van de celinhoud, de padding boven en beneden en de helft van de randen boven en beneden de opgegeven hoogte heeft betrekking op de som van de hoogte van de celinhoud, de padding boven en beneden en de celranden boven en beneden

De afmetingen van de kolommen en rijen in lagere versies van Opera wijken iets van die in versie 7.0 en hoger af.


In Microsoft Internet Explorer 5.0 en hoger is de weergave:

Afmetingen kolommen en rijen in Microsoft Internet Explorer

Microsoft Internet Explorer houdt de opgegeven kolombreedte en de rijhoogte in alle gevallen aan voor respectievelijk de breedte en de hoogte van de celinhoud. Bij het bepalen van de uiteindelijke breedte van de kolom en hoogte van de rij worden hier nog de padding en de randen bij opgeteld. De tabel zal daardoor in het algemeen hoger en breder zijn dan bij de andere browsers (hoe breder de padding en de randen, hoe groter het verschil).


Vervolg: Uitlijnen tabel



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

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