Tabellen

Regelmatig moet er op een website informatie worden geordend. Denk maar aan een site met een overzicht van producten, hierin staan afbeeldingen netjes onder elkaar met tekst er naast bijvoorbeeld. Meestal zijn dit websites die hun content uit een database laden, denk maar eens aan webwinkels.

Websites laden hun content uit een database. Om dit netjes te ordenen worden tabellen gebruikt.

Websites laden hun content uit een database. Om dit netjes te ordenen worden tabellen gebruikt.

Een ander voorbeeld van het ordenen van informatie zijn formulieren waarmee je als bezoeker van een website informatie kunt aanvragen of een product kunt kopen.

Tabellen gebruik je ook om een formulier netjes te stijlen.

Tabellen gebruik je ook om een formulier netjes te stijlen.

 

Dit alles zou je met div-elementen kunnen maken maar dan moet je veel verschillende div-elementen aanmaken. Het is gebruikelijk om hiervoor is een tabel te maken. Een tabel bestaat uit rijen en kolommen die zo tabelcellen vormen (denk maar aan Excel). In die tabelcellen kun je afbeeldingen en tekst plaatsen.

Twee tabellen met 4 rijen en 3 kolommen + een tabel met 1 rij en 3 kolommen.

Twee tabellen van 4 rijen met 3 kolommen + een tabel van 1 rij met 3 kolommen.

Links (nummer 1) zie je een voorbeeld van een lege tabel van 4 rijen en 3 kolommen. In het midden (nummer 2) kun je zien dat je in een tabel zelf kunt beslissen op welke plek je iets wilt plaatsen. En rechts (nummer 3) toont een van 1 rij met 3 kolommen. De HTML-code van de laatste (nummer 3) ziet er als volgt uit:

<table>
<tr>
<td>hallo</td>
<td></td>
<td></td>
</tr>
</table>

Lees dit als volgt: een tabel (<table>) heeft een rij (<tr>) met daarin 3 datacellen (<td>).
Net als een gewone HTML pagina heeft een tabel header cellen. De <th></th> tag. Deze heeft standaard een iets andere vormgeving (gecentreerde, vetgedrukte tekst) maar je kunt hem met CSS stijlen. Een tabel met 2 rijen en 3 kolommen heeft dan de volgende HTML code:

<table>
<tr>
<th>header cell</th>
<th>header cell</th>
<th>header cell</th>
</tr>
<tr>
<td>data cell</td>
<td>data cell</td>
<td>data cell</td>
</tr>
</table>

In een tabel cel kan van alles geplaatst worden: afbeeldingen, flashfilmpjes. Zelfs een nieuwe tabel! Op die manier krijg je veel mogelijkheden om een ontwerp goed uit te voeren. Er zijn zeer veel attributen te vinden
voor een tabel. Vooral omdat er zowel attributen bestaan voor de <table> tag als voor de <td> tag.

 

Header cellen en data cellen

Je tabel is voor een groot deel middels CSS vorm te geven. Je kunt in je CSS specificeren of je de hele table, alleen een rij en/of de header cell en data cell wilt vormgeven. Bijvoorbeeld:

Een tabel met header cells en dat

Een tabel met header cells en dat

De bijhorende CSS en HTML:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Table with CSS</title>
<style type=”text/css”>
table{
border: #F00 2px solid;
width:500px;
height:300px;
}
td, th{
border: #00F 1px dotted;
}
th{
background-color:#6F6;
}
</style>
</head>
<body>
<table>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

Een header cell kan ook alleen links, rechts of onder staan:

De header cellen kunnen ook links staan (of rechts)

De header cellen kunnen ook links staan (of rechts)

In dit geval is van iedere rij de eerste tabel cel een header cell. De eerste kolom is nu de header cell. In HTML is dit:
<table>
<tr>
<th>&nbsp;</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>&nbsp;</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>&nbsp;</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

 

Margin, Padding en cellspacing

Je kent margin en padding al om witruimte rondom (margin) en binnenin (padding) een box te creƫren. Helaas werkt margin niet bij tabelcellen, padding wel!

Als je tabelcellen onderling wel ruimte wilt geven dan zul je dit met behulp van cellspacing moeten doen. Dit kan niet met CSS maar moet op een ouderwetse manier in de HTML tag aangegeven worden:

<table cellspacing=”15″>
<tr>
<td>Tabel cell</td>
</tr>
</table>

LET OP:

  1. Cellspacing is een attribuut van de table terwijl het bedoeld is voor de tabelcellen. Dit is verwarrend maar het is nu eenmaal zo.
  2. Gebruik een is-teken (=) in plaats van de dubbele punt (:).
  3. Zet geen ‘px’ achter het getal.
  4. Sluit niet af met een puntkomma (;)