Cursus HTML 4.01 : handleiding tabellen

Een tabel wordt in HTML geplaatst tussen de tags <TABLE> en </TABLE>. Een tabelrij wordt geplaatst tussen <TR> en </TR>. Gegevens in een cel worden geplaatst tussen <TD> en </TD>.

Tabellen: TABLE

Een tabel staat tussen de tags <TABLE> en </TABLE>

De TABLE-tag ondersteunt attributen, de belangrijkste :

summary: beschrijving van de inhoud van de tabel voor niet grafische User Agents (audio, braille).
align: uitlijning van de tabel (left, right, center) : AFGEKEURD
width: breedte van de tabel in pixels of procenten (t.o.v. de beschikbare breedte)
bgcolor: achtergrondkleur : AFGEKEURD
frame: randen omheen de tabel :
- void: geen rand
- above: enkel een rand bovenaan
- below: enkel een rand onderaan
- hsides: rand boven en onder
- vsides: rand links en rechts
- lhs: enkel links (left-hand-side)
- rhs: enkel rechts (right-hand-side)
- box: rand aan de 4 kanten
- border: rand aan de 4 kanten
rules: lijntjes tussen de cellen van de tabel :
- none: geen lijntjes
- groups: enkel tussen groepen : THEAD, TFOOT, TBODY, COLGROUP en COL (zie verderop)
- rows: enkel lijntjes tussen de rijen
- cols: enkel lijntjes tussen de kolommen
- all: lijntjes tussen rijen en kolommen
border: breedte in pixels van de rand omheen de volledige tabel
bordercolor, bordercolorlight, bordercolordark: deze attributen komen niet voor in de HTML-specificaties van het W3C, maar worden soms gebruikt om de randkleur aan te geven. Een vaste randkleur stel je in met het attribuut bordercolor, wil je twee verschillende kleuren gebruiken dan werk je met bordercolorlight en bordercolordark.
cellspacing: ruimte tussen de verschillende cellen van de tabel
cellpadding: ruimte tussen de inhoud van een cel en de celrand

Tabelrijen : TR

De inhoud van een tabel wordt rij per rij opgebouwd. Een rij van een tabel staat tussen de tags <TR> en </TR> (eindtag is optioneel).

Belangrijkste attributen :

bgcolor: AFGEKEURD
align: horizontale uitlijning de cellen van de tabelrij.
- left: links uitgelijnd
- justify: links en rechts uitgelijnd
- right: rechts uitgelijnd
- center: gecentreerd
- char: uitgelijnd op een karakter aangegeven door het char attribuut (standaard het decimaal scheidingsteken). Werkt niet in alle browsers.
valign: vertikale uitlijning van de cellen van de tabelrij.
- top: gegevens bovenaan uitgelijnd
- middle: in het midden van de cel uitgelijnd
- bottom: onderaan in de cel uitgelijnd

Tabelcellen : TH en TD

Met de elementen TH en TD kan je inhoud aan de tabel geven. TH wordt gebruikt voor kolom- en rijkoppen, TD voor de andere cellen. User Agents zorgen ervoor dat TH-elementen anders worden weergegeven dan TD-elementen.

De attributen voor de TH en TD-tags komen overeen met de attributen voor de TR-tag hierboven. Een aantal extra attributen komen verderop ter sprake.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<P><BIG>Eenvoudige tabel</BIG><br><br>
<TABLE summary="Deze tabel bevat de naam van een student,
                het geslacht van de student,
				het meest geliefde vak 
				en de afstand tot de school in km"
	   frame="hsides"
	   rules="cols"
	   border="10px"
	   cellspacing="0px"
	   cellpadding="5px">
<TR>
   <TH>Naam</TH>
   <TH>Geslacht</TH>
   <TH>Leukste vak</TH>
   <TH>Afstand</TH>
<TR>
   <TD>P. Janssens</TD>
   <TD align="center">M</TD>
   <TD>Engels</TD>
   <TD align="right">12</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD align="center">V</TD>
   <TD>Frans</TD>
   <TD align="right">17</TD>
</TABLE>
</BODY>
</HTML>

CAPTION

Met het CAPTION-element kan je een (korte) beschrijving bij een tabel geven.

Een CAPTION-element moet onmiddellijk na de TABLE-tag worden geplaatst. Er is slechts één CAPTION-element per tabel.

Met het afgekeurde attribuut align kan je de positie van de CAPTION ten opzichte van de tabel bepalen (top, bottom, left of right)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<P><BIG>Eenvoudige tabel : CAPTION</BIG><br><br>
<TABLE summary="Deze tabel bevat de naam van een student,
                het geslacht van de student,
				het meest geliefde vak 
				en de afstand tot de school in km"
	   frame="hsides"
	   rules="cols"
	   border="10px"
	   cellspacing="0px"
	   cellpadding="5px">
<CAPTION>Gegevens over studenten</CAPTION>
<TR>
   <TH>Naam</TH>
   <TH>Geslacht</TH>
   <TH>Leukste vak</TH>
   <TH>Afstand</TH>
<TR>
   <TD>P. Janssens</TD>
   <TD align="center">M</TD>
   <TD>Engels</TD>
   <TD align="right">12</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD align="center">V</TD>
   <TD>Frans</TD>
   <TD align="right">17</TD>
</TABLE>
</BODY>
</HTML>

Rijen groeperen : THEAD, TFOOT en TBODY

Je kan in een tabel rijen groeperen door de elementen THEAD, TFOOT en TBODY te gebruiken. Zo kan een User Agent de tabel-onderdelen beter structureren, en kan je als gebruiker deze gebieden beter opmaken.

Onthoud:

THEAD, TFOOT en TBODY moeten uit evenveel kolommen bestaan.
De TBODY tag is verplicht als er een THEAD of TFOOT aanwezig is
De eindtags mogen weggelaten worden.
De TFOOT tag komt voor de TBODY tag(s)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<P><BIG>Tabel : THEAD, TFOOT, TBODY</BIG><br><br>
<TABLE summary="Deze tabel bevat de naam van een student,
                het geslacht van de student,
				het meest geliefde vak 
				en de afstand tot de school in km"
	   frame="hsides"
	   rules="groups"
	   border="10px"
	   cellspacing="0px"
	   cellpadding="5px">
<CAPTION>Gegevens over studenten</CAPTION>
<THEAD>
<TR>
   <TH>Naam</TH>
   <TH>Geslacht</TH>
   <TH>Leukste vak</TH>
   <TH>Afstand</TH>
<TFOOT>
   <TH>Einde Naam</TH>
   <TH>Einde Geslacht</TH>
   <TH>Einde Vak</TH>
   <TH>Einde Afstand</TH>
<TBODY>
<TR>
   <TD>P. Janssens</TD>
   <TD align="center">M</TD>
   <TD>Engels</TD>
   <TD align="right">12</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD align="center">V</TD>
   <TD>Frans</TD>
   <TD align="right">17</TD>
<TBODY>
<TR>
   <TD>P. Kalvers</TD>
   <TD align="center">M</TD>
   <TD>Aardrijkskunde</TD>
   <TD align="right">25</TD>
<TR>
   <TD>E. Deblazer</TD>
   <TD align="center">V</TD>
   <TD>Wiskunde</TD>
   <TD align="right">27</TD>
<TR>
   <TD>W. Beestjens</TD>
   <TD align="center">V</TD>
   <TD>Wiskunde</TD>
   <TD align="right">28</TD>
<TBODY>
<TR>
   <TD>K. Posters</TD>
   <TD align="center">V</TD>
   <TD>Tekenen</TD>
   <TD align="right">33</TD>
<TR>
   <TD>T. Verpinnen</TD>
   <TD align="center">M</TD>
   <TD>Frans</TD>
   <TD align="right">39</TD>
</TABLE>
</BODY>
</HTML>

Kolommen groeperen : COLGROUP, COL

COLGROUP

COLGROUPs staan je toe structurele verdelingen te maken in een tabel. Je kan kolomgroepen van een tabel opmaken volgens een Style Sheet of met behulp van attributen zoals het rules-attribuut van het TABLE element.

Met het span-attribuut van het COLGROUP element kan je aangeven hoeveel kolommen er binnen deze groep vallen

Met het width-attribuut kan je de breedte van de kolommen binnen deze groep instellen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<P><BIG>COLGROUP</BIG><br><br>
<TABLE border="2" frame="hsides" rules="groups"
          summary="Inschrijving voor Badmintontornooien.">
<CAPTION>Inshrijving badmintontornooien</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Lidnr<BR>ID
<TH>Naam
<TH>Prov.<br> Kamp.
<TH>B.<br>Kamp.
<TH>Rec.<br>Brugge
<TH>Rec.<BR>Izegem
<TH>Rec.<BR>Oostende
<TBODY>
<TR><TD>1200<TD>K. Peters<TD><TD><TD>X<TD>X<TD>?
<TR><TD>1250<TD>C. Somers<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>V. Pluims<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>S. Geerts<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>T. Bastiaans<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>G. Verhulst<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>M. Talpe<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>C. Erics<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>A. Pieters<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>V. Vertsraete<TD>X<TD><TD><TD>?<TD>X
<TBODY>
<TR><TD>437<TD>L. Evers<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>G. Taar<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>W. Ten Schap<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>F. Abels<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>N. Nuyttens<TD><TD>X<TD><TD><TD>X
</TABLE>
</BODY>
</HTML>

COL

Je kan kolommen ook groeperen met het COL-element. COL-elementen kunnen binnen een COLGROUP voorkomen maar ook als zelfstandige eenheid.

COL elementen dienen enkel om via attributen zoals Style Sheets kolommen op te maken, ze kunnen niet als structurele eenheid gebruikt worden. In de praktijk is het voor de visuele weergave van tabellen onbelangrijk of je nu met COLGROUP of COL werkt.

COL elementen kunnen ook het attribuut span hebben om verschillende kolommen van een opmaak te voorzien.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<P><BIG>COL</BIG><br><br>
<TABLE border="2" frame="hsides" rules="groups"
          summary="Inschrijving voor Badmintontornooien."
		  cellspacing="0">
<CAPTION>Inshrijving badmintontornooien</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center">
	<COL style="background:yellow">
	<COL style="background:lightgreen">
</COLGROUP>
<COLGROUP align="center">
	<COL style="background:pink" span="2">
	<COL style="background:lightblue">
</COLGROUP>
<COL style="color:red;text-align:center">
<COL style="color:green;text-align:center">
<THEAD valign="top">
<TR>
<TH>Lidnr<BR>ID
<TH>Naam
<TH>Prov.<br> Kamp.
<TH>B.<br>Kamp.
<TH>Rec.<br>Brugge
<TH>Rec.<BR>Izegem
<TH>Rec.<BR>Oostende
<TH>Nog<br> Betalen
<TH>Betaald
<TBODY>
<TR><TD>1200<TD>K. Peters<TD><TD><TD>X<TD>X<TD>?<TD>X<TD>
<TR><TD>1250<TD>C. Somers<TD>X<TD><TD>X<TD>X<TD>X<TD>X<TD>
<TR><TD>1251<TD>V. Pluims<TD>X<TD><TD>X<TD>X<TD>X<TD><TD>X
<TR><TD>1252<TD>S. Geerts<TD>X<TD><TD>X<TD>X<TD>X<TD>X<TD>
<TR><TD>1253<TD>T. Bastiaans<TD>X<TD><TD>X<TD>X<TD>X<TD><TD>X
<TR><TD>1254<TD>G. Verhulst<TD>X<TD><TD>X<TD>X<TD>X<TD><TD>X
<TR><TD>1255<TD>M. Talpe<TD>X<TD><TD><TD><TD>X<TD><TD>X
<TR><TD>1256<TD>C. Erics<TD>X<TD><TD><TD><TD>X<TD>X<TD>
<TR><TD>1257<TD>A. Pieters<TD>X<TD><TD><TD><TD>X<TD>X<TD>
<TR><TD>1361<TD>V. Vertsraete<TD>X<TD><TD><TD>?<TD>X<TD><TD>X
<TBODY>
<TR><TD>437<TD>L. Evers<TD><TD>X<TD>X<TD>X<TD>X<TD>X<TD>
<TR><TD>708<TD>G. Taar<TD><TD>X<TD><TD><TD>X<TD>X<TD>
<TR><TD>709<TD>W. Ten Schap<TD><TD>X<TD><TD><TD>X<TD><TD>X
<TR><TD>710<TD>F. Abels<TD><TD>X<TD><TD><TD>X<TD><TD>X
<TR><TD>720<TD>N. Nuyttens<TD><TD>X<TD><TD><TD>X<TD><TD>X
</TABLE>
</BODY>
</HTML>

Cellen samenvoegen : COLSPAN en ROWSPAN

Met de attributen COLSPAN en ROWSPAN kan je ervoor zorgen dat bepaalde cellen uit een tabel worden samengevoegd.

Je kan deze attributen gebruiken in TH en TD-elementen

COLSPAN gebruik je voor een cel die meerder kolommen moet overspannen : cellen samenvoegen in horizontale richting. De rij waarin een cel een colspan heeft zal minder TH en TD elementen bevatten dan een rij waarin bij geen enkele cel colspan is gebruikt.

ROWSPAN gebruik je wanneer een TH of TD element meerdere rijen moet overspannen : vertikaal samenvoegen van cellen. De daaropvolgende rij(en) zal (zullen) bijgevolg een cel minder hebben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
  <STYLE type="text/css">
  TR {
       text-align:center;
	 }
 
 </STYLE>
</HEAD>
<BODY>
<P><BIG>COLSPAN en ROWSPAN</BIG><br><br>
<TABLE border="2" frame="hsides" rules="border"
          summary="Lesrooster IVO Brugge 2e semester"
		  cellspacing="0px"
		  cellpadding="10px">
<CAPTION>Lesrooster</CAPTION>
<COLGROUP style="background:#FFFFCC;text-align:left">
<COLGROUP span="5" style="background:#CCCCFF;text-align:center;color:#990000">
<THEAD>
<TR style="background:#CCFFCC">
	<TH>Lesrooster
	<TH>maandag
	<TH>dinsdag
	<TH>woensdag
	<TH>donderdag
	<TH>vrijdag
<TBODY>
<TR>
	<TH>Voormiddag
	<TD>Excel
	<TD colspan="2">Access
	<TD>HTML
	<TD rowspan="3">Geen les
<TR>
	<TH>Namiddag
	<TD rowspan="2">Javascript
	<TD>C
	<TD>Java
	<TD>Access
	
<TR>
	<TH>Avond
	<TD>SQL
	<TD>Analyse
	<TD>C
</TABLE>
</BODY>
</HTML>

HTML 4.01 : Tabellen

Inleidend voorbeeld

Eenvoudige tabellen : TABLE, TR, TD