Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Inhoud onderdeel: Introductie tabellen | Eenvoudige tabellen | Samenvoegen cellen | Uitlijnen celinhoud | Uitlijnen tabel | Bijschrift bij tabel | Tabelranden | Achtergrond tabel | Rijgroepen | Kolomgroepen | Kader en lijnen | Voorrangsregels bij uitlijnen

Gerelateerde elementen: CAPTION | COL | COLGROUP | TABLE | TBODY | TD | TFOOT | TH | THEAD | TR

Kader en lijnen

Met het BORDER attribuut van het TABLE element kun je bepalen of er wel of geen randen moeten worden weergegeven in de tabel. De gemaakte keuze geldt voor alle randen. Je kunt geen onderscheid maken tussen de verschillende randen en op die manier bijvoorbeeld structuur aanbrengen in de tabel. Sinds de komst van HTML 4.0 beschikken we over twee nieuwe attributen voor het TABLE element, die dat onderscheid wel mogelijk maken. Het RULES attribuut kun je gebruiken, om vast te leggen welke van de lijnen tussen de rijen en kolommen van een tabel de browser moet weergegeven. Met het FRAME attribuut doe je hetzelfde voor de randen van het kader van de tabel (de randen aan de buitenzijde).

In het volgende voorbeeld zijn de attributen RULES en FRAME gebruikt om structuur te geven aan de tabel. Het RULES attribuut heeft de waarde "groups". Daardoor zijn alleen de lijnen tussen de rijgroepen en tussen de kolomgroepen zichtbaar. Het FRAME attribuut heeft de waarde "hsides". Dat zorgt ervoor dat alleen de boven- en onderrand zichtbaar zijn.

Om ook in browsers die de elementen THEAD, TFOOT, TBODY en COLGROUP niet ondersteunen tot een acceptabele weergave te komen, zijn de attributen voor de uitlijning toegevoegd aan de elementen TD, TH en TR.

<TABLE BORDER="1" FRAME="hsides" RULES="groups">
<CAPTION><B>Ondersteuning door browsers</B></CAPTION>
<COLGROUP WIDTH="80"></COLGROUP>
<COLGROUP SPAN="3" WIDTH="60"></COLGROUP>
<THEAD>
<TR VALIGN="top">
<TH ALIGN="left">&nbsp;</TH>
<TH>Microsoft Internet Explorer</TH>
<TH>Netscape Navigator</TH>
<TH>Opera</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TH ALIGN="left">COL</TH>
<TD ALIGN="center">3.0</TD>
<TD ALIGN="center">6.0</TD>
<TD ALIGN="center">4.0</TD>
</TR>
...
</TBODY>
<TBODY>
<TR>
<TH ALIGN="left">FRAME</TH>
<TD ALIGN="center">3.0</TD>
<TD ALIGN="center">6.0</TD>
<TD ALIGN="center">7.1</TD>
</TR>
...
</TBODY>
</TABLE>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Hoewel de attributen RULES en FRAME niet door oudere browsers ondersteund worden, kun je ze zonder problemen gebruiken.

Als alternatief voor de attributen RULES en FRAME kun je ook stylesheets gebruiken voor het geven van structuur aan een tabel. Ter illustratie is hierna een voorbeeld voor de eerder gebruikte tabel opgenomen. Op dit moment is het overigens niet aan te bevelen de gegeven oplossing in de praktijk toe te passen, omdat in de weergave door Microsoft Internet Explorer alle randen ontbreken. Deze browser geeft namelijk alleen randen weer voor de elementen COL, COLGROUP, TBODY, TFOOT en THEAD als het BORDER attribuut is opgenomen voor het TABLE element met een andere waarde dan "0". Wanneer je dat echter doet, verschijnen in andere browsers randen op plaatsen waar dat juist niet de bedoeling is.

In de volgende tabel zijn alle attributen die de opmaak van de tabel bepalen weggelaten.

<TABLE>
<CAPTION><B>Ondersteuning door browsers</B></CAPTION>
<COLGROUP></COLGROUP>
<COLGROUP SPAN="3"><COL><COL><COL></COLGROUP>
<THEAD>
<TR>
<TH>&nbsp;</TH>
<TH>Microsoft Internet Explorer</TH>
<TH>Netscape Navigator</TH>
<TH>Opera</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TH>COL</TH><TD>3.0</TD><TD>6.0</TD><TD>4.0</TD>
</TR>
...
</TBODY>
<TBODY>
<TR>
<TH>FRAME</TH><TD>3.0</TD><TD>6.0</TD><TD>7.1</TD>
</TR>
...
</TBODY>
</TABLE>

In een stijlblok in de head van het document zijn de volgende stijlregels opgenomen:

TABLE    { border-collapse: collapse; }
.kg1     { width: 80px; color: #000000; background-color: #F0F0F0; }
.kg2     { border-left: 2px solid #C0C0C0; width: 60px; }
THEAD    { border-top: 2px solid #C0C0C0;
           border-bottom: 2px solid #C0C0C0;
           color: #000000; background-color: #F0F0F0; }
TBODY    { border-top: 2px solid #C0C0C0;
           border-bottom: 2px solid #C0C0C0; }
COL      { border-left: 1px solid #C0C0C0; }
TR       { border-top: 1px solid #C0C0C0; }
TH       { text-align: left; }
THEAD TH { text-align: center; vertical-align: top; }
TD       { text-align: center; }

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Vervolg: Voorrangsregels bij uitlijnen

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

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