<HTML>-hulp, voor iedereen die HTML wil leren Free counter and web stats

Tabellen

Zonder tabellen zou het bijna onmogelijk zijn om internet pagina's een van een redelijke layout te voorzien.
Op deze pagina wordt uitgelegt hoe u tabellen kunt maken.

Tabel definiëren

Om een tabel te definiëren, gebruikt u de code:

<TABLE>
.(gegevens).
</TABLE>

Tussen de begin- en eindcode worden de gegevens voor de tabel ingevuld, zoals een tabel-bijschrift en de inhoud van de cellen. (zie onderstaande paragrafen).
Aan de code <TABLE> kunt u een aantal opties meegeven:

Optie

Omschrijving
BORDER=x Hiermee kunt u de dikte van het kader van de tabel instellen. BORDER=0 geeft geen kader, BORDER=1 geeft een kader met dikte 1 enzovoort.
COLS=x Hiermee kunt u het aantal kolommen instellen dat de tabel heeft. De browser kan dan sneller de vorm van de tabel bepalen.
WIDTH=x(%) Hiermee stelt u de maximale breedte in van de tabel. Dit kan absoluut (in pixels) en relatief (tov het venster).
CELLPADDING=x Stelt de witruimte (in pixels) in van de tekst in de cellen ten opzichte van de kader.
CELLSPACING=x Stelt de witruimte (in pixels) van het kader in.

Een bijschrift plaatsen

Optioneel kunt u de tabel een bijschrift geven. (bijvoorbeeld Tabel 1.13). U gebruikt hiervoor de code:

<CAPTION>Tabel 1.13</CAPTION>

Het beste kunt u de code direct onder de code <TABLE> typen. De code <CAPTION> heeft een aantal opties:

Optie

Omschrijving
ALIGN=TOP Het bijschrift wordt boven de tabel geplaatst.
ALIGN=BOTTOM Het bijschrift wordt onder de tabel geplaatst.
ALIGN=LEFT Het bijschrift wordt links van de tabel geplaatst.
ALIGN=RIGHT Het bijschrift wordt rechts van de tabel geplaatst.

De cellen invullen

Bij het invullen van de gegevens in de cellen gebruik je drie verschillende codes:

  1. Bij elk begin van een nieuwe rij typ je de code <TR>
  2. Bij een kopcel typ je de code <TH>
  3. Bij een gewone cel typ je <TD>

Aan de codes <TH> en <TD> kun je de onderstaande opties meegeven:

Optie Omschrijving
ALIGN=LEFT De inhoud van de cel wordt links uitgelijnd.(Standaard voor <TD>)
ALIGN=CENTER De inhoud van de cel wordt gecentreerd. (Standaard voor <TH>)
ALIGN=RIGHT De inhoud van de cel wordt rechts uitgelijnd.
VALIGN=TOP De inhoud van de cel wordt bovenin de cel geplaatst.
VALIGN=MIDDLE De inhoud van de cel wordt verticaal gecentreerd. (Standaard)
VALIGN=BOTTOM De inhoud van de cel wordt onderin de cel geplaats.
ROWSPAN=x Hiermee kun je opgeven hoeveel rijen de cel in beslag neemt.
COLSPAN=x Hiermee kun je opgeven hoeveel kolommen de cel in beslag neemt.

Een voorbeeldpagina:

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border="1" cols=2 width=80% cellpadding=5 cellspacing=5>
<CAPTION align=bottom>voorbeeldtabel</CAPTION>
<tr>
   <th>header cel</th>
   <td rowspan=2>gewone cel over twee rijen</td>
</tr>
<tr>
    <!-- lege cel -->
    <td>&nbsp;</td>
    <!-- Hier staat de cel van de rij hierboven -->
</tr>
<tr>
    <!-- een cel over twee kolommen -->
    <td colspan="2" align=right>brede cel</td>
</tr>
</table>
</body>
</html>

Klik hier om te zien hoe het voorbeeld er uit zal zien