WebThings - by Jan Weijers
Alle hoofdstukken...
Inhoudsopgave
Inleiding
Een eenvoudig HTML document
Afbeeldingen
Lijsten
Links
Tabellen
Frames
Formulieren
Cascading stylesheets
JavaScript
PHP programmeren
Server side includes
CGI & Perl
Speciale tekens
Kleurvoorbeelden
Meer informatie
Software
Recente toevoegingen
Alfabetische index
In dit hoofdstuk...
Eenvoudige tabel
Cellpadding: ruimte voor de inhoud van de cel
Cellspacing: ruimte tussen cellen
De rand van tabellen
Breedte van een tabel
THEAD, TBODY en TFOOD elementen
Tabel kolomhoofd
Uitlijnen van de inhoud van een cel
Cellen die meer dan één rij of kolom omvatten
Titel boven een tabel
Tekstterugloop in een cel
Tekst in kolommen plaatsen met een tabel

 

 

Language choice...
You have chosen to use Dutch as your preferred language.Nederlands vlaggetje Click here to switch to English.

Tabellen

Tabellen zijn een eenvoudige en effectieve manier om informatie te ordenen. HTML biedt daar volop mogelijkheden voor.

Eenvoudige tabel

Dit is het meest eenvoudige voorbeeld van een tabel:

<TABLE SUMMARY="een overzicht van de inhoud van deze tabel" BORDER="4" CELLPADDING="5" CELLSPACING="5" WIDTH="200">
<TR>
<TD>Dit is cel 1</TD>
<TD>Dit is cel 2</TD>
</TR>
<TR>
<TD>Cel 3</TD>
<TD>En dit is de laatste cel, nummer 4</TD>
</TR>
</TABLE>

Dit is cel 1 Dit is cel 2
Cel 3 En dit is de laatste cel, nummer 4

Het TABLE element geeft aan dat de data er tussenin een tabel vormt. De attributen WIDTH, CELLPADDING, CELLSPACING en BORDER worden verderop uitgelegd.

Het SUMMARY attribuut geeft een samenvatting van de tabel die bijvoorbeeld door braillelezers gebruikt kan worden.

<TR> en </TR> omsluiten een rij data in de tabel. Het totaal aantal rijen in de tabel wordt bepaald door het aantal TR elementen wat je gebruikt. <TD> en </TD> omsluiten de data voor een cel. Het totaal aantal cellen in een rij bepaald het aantal kolommen in de tabel. Overigens zijn de afsluitende tags </TR> en </TD> niet verplicht.

In dit voorbeeld staat er alleen tekst in de cellen. Je kunt er evengoed afbeeldingen of links in plaatsen of zelfs een andere tabel.

De meeste browsers passen de grootte van de tabel en de breedte van de kolommen automatisch aan de inhoud van de cellen aan zoals in dit voorbeeld. Als je een verschillend aantal kolommen in verschillende rijen hebt probeert de browser er iets van te maken maar meestal is het resultaat heel onvoorspelbaar en lelijk.

To the top

Cellpadding: ruimte voor de inhoud van de cel

Het CELLPADDING attribuut stelt vast hoeveel witte ruimte er om de inhoud van een cel wordt geplaatst:

<TABLE BORDER="2" CELLPADDING="2">
<TR><TD>Padding is 2</TD></TR>
</TABLE>

Padding is 2

<TABLE BORDER="2" CELLPADDING="20">
<TR><TD>Padding is 20</TD></TR>
</TABLE>

Padding is 20

Zoals je kunt zien bepaalt het CELLPADDING attribuut de witte ruimte tussen de inhoud van een cel en de rand van die cel. Als je geen CELLPADDING gebruikt is de ruimte er niet en worden de randen van de cel direct om de inhoud getekend.

To the top

Cellspacing: ruimte tussen cellen

Het CELLSPACING attribuut bepaalt hoeveel ruimte er tussen de cellen staat. Deze twee voorbeelden maken dat duidelijk:

<TABLE BORDER="2" CELLSPACING="20">
<TR><TD>Een cel</TD>
<TD>Nog een cel</TD></TR>
</TABLE>

Een cel Nog een cel

<TABLE BORDER="2" CELLSPACING="2">
<TR><TD>Een cel</TD>
<TD>nog een cel</TD></TR>
</TABLE>

Een cel nog een cel
To the top

De rand van tabellen

Het BORDER attribuut geeft aan welke rand er om de tabel wordt getekend. Als je geen BORDER attribuut gebruikt, hebben de tabel en cellen geen randen:

<TABLE>
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TABLE>

EenTwee
DrieVier

Je kunt het BORDER attribuut willekeurig welke waarde geven zolang het maar een positief, geheel getal is:

<TABLE BORDER="24">
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TABLE>

EenTwee
DrieVier
To the top

Breedte van een tabel

Met het WIDTH attribuut kun je de breedte van een tabel instellen.

<TABLE WIDTH="400" BORDER="1">
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TABLE>

EenTwee
DrieVier

De waarde voor WIDTH kan een geheel getal zijn voor een breedte in pixels of een percentage voor een breedte relatief aan het omringende element:

<TABLE WIDTH="50%" BORDER="1">
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TABLE>

EenTwee
DrieVier

Zoals je kunt zien, krijgt deze tabel een breedte van 50% van het vierkant er omheen.

To the top

THEAD, TBODY en TFOOD elementen

Je kunt een tabel in verdelen in een kop, midden en voet met de THEAD, TBODY en TFOOD elementen.

<TABLE>
<THEAD><TR><TD COLSPAN="2">Kop</TD></TR></THEAD>
<TFOOT><TR><TD COLSPAN="2">Voet</TD></TR></TFOOT>
<TBODY>
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TBODY>
</TABLE>

Header
Footer
OneTwo
OneTwo

Het THEAD element wordt altijd bovenaan de tabel getoond, TFOOT altijd onderaan. Bij langere tabellen kan de browser de kop bovenaan elke pagina herhalen en de voet onderaan. Sommige browsers tonen ook extra ruimte tussen deze drie elementen.

To the top

Tabel kolomhoofd

Het TH element kan een kolomhoofd definiëren:

<TABLE WIDTH="50%" BORDER="1">
<TR><TH>Werknemer</TH><TH>Salaris</TH></TR>
<TR><TD>Tom Jones</TD><TD>€40,000</TD></TR>
</TABLE>

WerknemerSalaris
Piet Snot€40,000

Browsers tonen het TH element anders dan het TD element. Hoe anders precies, dat hangt van de browser af. Je kunt TH ook gebruiken in combinatie met een THEAD element:

<TABLE WIDTH="50%" BORDER="1">
<THEAD><TR><TH>Werknemer</TH><TH>Salaris</TH></TR></THEAD>
<TBODY>
<TR><TD>Piet Snot</TD><TD>€40,000</TD></TR>
</TBODY>
</TABLE>

WerknemerSalaris
Piet Snot€40,000

Het THEAD element moet voor het TBODY element staan.

To the top

Uitlijnen van de inhoud van een cel

De ALIGN en VALIGN attributen kunnen gebruikt worden met het TR, TD en TH element en met de TBODY, THEAD en TFOOT elementen. Het hangt er vanaf of je het uitlijnen per cel, per rij of voor een heel deel van de tabel vast wilt leggen. ALIGN controleert de horizontale uitlijning. Mogelijke waarden zijn "left", "center", "right" of "justify". VALIGN controleert de verticale uitlijning. Mogelijke waarden zijn "top", "middle", "bottom" of "baseline". Hier is een voorbeeld van het gebruik van VALIGN:

<TABLE BORDER="1">
<TR>
<TD>Een<BR>Twee<BR>Drie</TD>
<TD VALIGN="top">Een</TD>
<TD>Twee</TD>
<TD VALIGN="bottom">Drie</TD>
</TR>
</TABLE>

Een
Twee
Drie
Een TweeDrie

Het uitgangspunt is "left" voor ALIGN en "middle" voor VALIGN. Meestal gebruik je deze dus niet, met een uitzondering. Als je ALIGN of VALIGN instelt voor een hele rij door dit attribuut te gebruiken bij een TR element, kun je voor één cel een uitzondering maken door die attributen te gebruiken bij een TD element. In het volgende voorbeeld is VALIGN "top" voor de hele rij, met de derde cel als uitzondering:

<TABLE BORDER="3">
<TR VALIGN="top">
<TD>Een<BR>Twee<BR>Drie<BR>Vier</TD>
<TD>Een</TD>
<TD>Twee</TD>
<TD VALIGN="middle">Drie</TD>
<TD>Vier</TD>
</TR>
</TABLE>

Een
Twee
Drie
Vier
Een Twee Drie Vier

Het ALIGN attribuut gebruik je op dezelfde manier:

<TABLE WIDTH="80%" BORDER="5">
<TR>
<TD ALIGN="right">Rechts</TD>
<TD>Uitganspunt links</TD>
<TD ALIGN="center">Centreren</TD>
</TR>
</TABLE>

Rechts Uitganspunt links Centreren

"Justify" werkt alleen goed met langere tekst als de linker- en rechtermarge uitgelijnd kunnen worden:

<TABLE WIDTH="80%" BORDER="4" CELLSPACING="0" CELLPADDING="5">
<TR>
<TD ALIGN="justify">Semper ubi sub ubi ...... cum periculo deicerentur.</TD>
</TR>
</TABLE>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Kijk ook eens naar het gebruik van CELLSPACING en CELLPADDING in dit voorbeeld. Door CELLSPACING in te stellen op 0 verdwijnt de lege ruimte tussen de rand van de tabel en de rand van de cel.

To the top

Cellen die meer dan één rij of kolom omvatten

Het COLSPAN attribuut vertelt de browser dat de cel meer dan één kolom omvat. Op dezelfde manier vertelt het ROWSPAN attribuut dat de cel meer dan één rij omvat:

<TABLE BORDER="2">
<TR ALIGN="center">
<TD>Een</TD>
<TD>Een</TD>
<TD>Een</TD>
<TD ROWSPAN="2">Twee rijen</TD>
</TR>
<TR ALIGN="center">
<TD COLSPAN="2">Twee kolommen</TD>
<TD>Een</TD>
</TR>
</TABLE>

Een Een Een Twee rijen
Twee kolommen Een

Zoals je ziet omvat de vierde cel van de eerste rij twee rijen en de eerste cel van de tweede rij twee kolommen. Je moet het aantal cellen, rijen en kolommen goed uitpuzzelen anders wordt je tabel een chaos.

To the top

Titel boven een tabel

Je kunt het CAPTION element gebruiken om een titel boven een tabel te zetten:

<TABLE BORDER="3">
<CAPTION>Lijst van e-mail adressen</CAPTION>
<TR><TH>Naam</TH><TH>E-mail</TH></TR>
<TR><TD>Jan Weijers</TD><TD>nojunk@nojunk.com</TD></TR>
</TABLE>

Lijst van e-mail adressen
NaamE-mail
Jan Weijersnojunk@nojunk.com

Je kunt maar één CAPTION element in een tabel gebruiken en het moet onmiddellijk na het TABLE element komen. De titel komt standaard boven de tabel te staan maar dat kun je veranderen met stylesheets.

To the top

Tekstterugloop in een cel

De tekst in een cel loopt automatische terug zodat de tabel binnen het venster van de browser past en binnen de cellen van de tabel:

<TABLE BORDER="2">
<TR>
<TD>Semper</TD>
<TD>Semper ... deicerentur.</TD>
</TR>
</TABLE>

Semper Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.
To the top

Tekst in kolommen plaatsen met een tabel

Je kunt een tabel gebruiken om tekst in meerdere kolommen te plaatsen:

<TABLE WIDTH="80%">
<TR VALIGN="top">
<TD STYLE="width:50%;">Semper ubi sub ubi ... tenere posset,</TD>
<TD STYLE="width:50%;">sed aliae eodem ... deicerentur.</TD>
</TR>
</TABLE>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Zoals je kunt zien hebben beide TD elementen een STYLE="width:50%;" attribuut. Hiermee wordt voorkomen dat de browser de breedte van de cel aanpast aan de hoeveelheid tekst en de kolommen verschillende breedtes krijgen. Gebruik je dat attribuut niet dan moet je er voor zorgen dat er precies evenveel tekst in beide kolommen staat. Overigens, die 50% is een percentage van het omringende element, in dit geval dus de tabel.

To the top

 

Reacties welkom...

Ik hoor graag je mening over deze gids, informatie die je graag toegevoegd zou willen zien of eventuele fouten die je hebt ontdekt. Klik hier.

 

Open standaarden...

Deze site is volledig conform de open standaarden van het World Wide Web Consortium (W3C). Je kunt op de logo's klikken om dat te verifiëren.

HTML 4 logo

CSS logo

 

 

©1995-2017 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.