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


Bijschrift bij tabel

Je kunt een tabel van een bijschrift voorzien, door direct na de activering van het TABLE element een CAPTION element op te nemen. Het bijschrift wordt in HTML standaard midden boven de tabel geplaatst. Het ALIGN attribuut kun je gebruiken om het bijschrift een andere plaats te geven. Als alternatief voor het in HTML 4.0 afgekeurde ALIGN attribuut biedt CSS de caption-side eigenschap.

In de voorbeelden in dit onderdeel wordt een tabel gebruikt met de volgende HTML-code:

<TABLE>
<CAPTION>Dit is het bijschrift</CAPTION>
<TR>
<TD>a1</TD><TD>a2</TD><TD>a3</TD>
</TR>
<TR>
<TD>b1</TD><TD>b2</TD><TD>b3</TD>
</TR>
<TR>
<TD>c1</TD><TD>c2</TD><TD>c3</TD>
</TR>
</TABLE>

In een stijlblok in de head van het document zijn stijlregels opgenomen, die onder meer de weergave van de tabelranden vastleggen:

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

Voorbeeld bijschrift bij tabel

Als je voor het CAPTION element een stijl definieert met de caption-side eigenschap, dan kun je de plaats van het bijschrift ten opzichte van de tabel beïnvloeden. De waarde top is de beginwaarde van de caption-side element en plaatst het bijschrift gecentreerd boven de tabel. De waarde bottom zorgt ervoor dat het bijschrift gecentreerd onder de tabel komt te staan.

TABLE   { border-collapse: collapse; border: 1px solid #C0C0C0; }
TD      { border: 1px solid #C0C0C0; text-align: center; width: 60px; }
CAPTION { caption-side: bottom; }

Voorbeeld bijschrift bij tabel

Wanneer je de horizontale uitlijning van een bijschrift wilt bepalen, dan moet je de text-align eigenschap opnemen.

TABLE   { border-collapse: collapse; border: 1px solid #C0C0C0; }
TD      { border: 1px solid #C0C0C0; text-align: center; width: 60px; }
CAPTION { caption-side: bottom; text-align: left; }

Voorbeeld bijschrift bij tabel

De waarden left en right kun je gebruiken, als je wilt dat het bijschrift links of rechts naast de tabel wordt weergegeven. De waarden maken echter geen deel meer uit van CSS 2.1 en worden slechts beperkt ondersteund (door recente versies van Mozilla en Netscape Navigator correct en door minder recente versies van Opera vaak met een beroerd resultaat).

TABLE   { border-collapse: collapse; border: 1px solid #C0C0C0; }
TD      { border: 1px solid #C0C0C0; text-align: center; width: 60px; }
CAPTION { caption-side: right; }

Voorbeeld bijschrift bij tabel

Wanneer je de verticale uitlijning van een bijschrift links of rechts naast de tabel wilt bepalen, dan moet je de vertical-align eigenschap opnemen voor het CAPTION element.

TABLE   { border-collapse: collapse; border: 1px solid #C0C0C0; }
TD      { border: 1px solid #C0C0C0; text-align: center; width: 60px; }
CAPTION { caption-side: right; vertical-align: bottom; }

Voorbeeld bijschrift bij tabel

Een bijschrift boven of onder de tabel heeft dezelfde breedte als de tabel en wordt er direct tegenaan geplaatst. Je kunt dat goed zien als je een achtergrondkleur voor het CAPTION element definieert.

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

Voorbeeld bijschrift bij tabel

Door voor het CAPTION element de margin-bottom eigenschap op te nemen, kun je ervoor zorgen dat er wat afstand komt tussen het bijschrift en de tabel.

TABLE   { border-collapse: collapse; border: 1px solid #C0C0C0; }
TD      { border: 1px solid #C0C0C0; text-align: center; width: 60px; }
CAPTION { color: #000000; background-color: #FFFF99; margin-bottom: 5px; }

Voorbeeld bijschrift bij tabel


Vervolg: Inline tabellen



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

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