9.1 De basis

In HTML kunnen we ook tabellen maken. Tabellen kunnen heel handig zijn om een mooie lay-out te hebben van de webpagina. Maar dit is ook altijd handig om bepaalde lijsten duidelijk en overzichtelijk te laten zien.

Om een tabel te maken wordt de tag <table> gebruikt, ook deze moet op het einde worden afgesloten met de eindtag </table>.

Tussen deze twee tags gaan we alle informatie voor de tabel plaatsen. We hebben rijen (horizontaal), en kolommen (verticaal). Een bepaalde plaats waar een bepaalde rij en kolom samenkomen is een cel.

We moeten de tabel cel per cel vullen. Een rij in een tabel begint met de tag <tr> en eindigt met </tr>. Alles wat hiertussen zit is de informatie voor deze rij.
In die rij plaatsen we één of meerdere cellen. Een cel begint met de code <td> en eindigt met </td>.

Een simpele tabel is dus:
<table>
<tr>
<td>Winkel</td>
<td>Uitgave in Euro</td>
</tr>
<tr>
<td>Krantenwinkel</td>
<td>2,00</td>
</tr>
<tr>
<td>Bakker</td>
<td>5,05</td>
</tr>
<tr>
<td>Slager</td>
<td>7,34</td>
</tr>
<tr>
<td>Bioscoop</td>
<td>7,50</td>
</tr>
</table>

Dit maakt:

Winkel	Uitgave in Euro
Krantenwinkel	2,00
Bakker	5,05
Slager	7,34
Bioscoop	7,50

Bovenstaand voorbeeld zal een kleine tabel opleveren die onzichtbaar is. We kunnen deze tabel ook groter maken, zo groot of zo klein als we maar willen.
Dit doen we door een extra parameter mee te geven aan de tag <table>. Om de tabelgrootte te wijzigen voegen we width=”” en/of height=”” in.
Width zegt de breedte van de tabel, height de hoogte. Het cijfer dat we invullen is ofwel de exacte grootte in pixels, ofwel aangegeven in procenten.

Je computerscherm bestaat uit enorm veel miniscule puntjes. Zo één puntje noemt men een pixel. Je kan dus met andere woorden je tabel exact en perfect aanpassen aan de grootte die jij wenst.
Maar je kan ook kiezen voor een relatieve grootte. Dit doe je door het aantal in procenten weer te geven.
Op deze manier kan je steeds bijvoorbeeld de helft van het document reserveren voor je tabel. Let hier wel op dat de tabel door iedereen anders zal worden gezien. Dit is namelijk afhankelijk van de schermresolutie en de grootte van het browserscherm op het ogenblik dat de bezoeker je site bezoekt.
Ondanks je niet echt weet hoe groot de tabel voor de bezoeker zal ogen, toch zal in de praktijk het meeste gebruik worden gemaakt van procenten. Dit is om te vermijden dat bezoekers steeds met hun muis van links naar rechts moeten schuiven om je webpagina te zien, omdat jij het aantal pixels te groot voor hun scherm hebt gekozen.

Een voorbeeld
<table width="50%" height="100">

Dit geeft:

Winkel	Uitgave in Euro
Krantenwinkel	2,00
Bakker	5,05
Slager	7,34
Bioscoop	7,50

Bovenstaand voorbeeldje zal een tabel geven die in de breedte de helft van het scherm is. In de lengte zal ze exact 100 pixels zijn.

Onze tabel is nog steeds niet zichtbaar voor de bezoeker. De bezoeker zal de tabel wel zien, maar de lijnen tussen de cellen zijn niet zichtbaar.
Dit kunnen we instellen door een extra commando mee te geven aan de tag <table>, namelijk border="".

Verder gewerkt op vorig voorbeeld krijgen we dan:

<table width="50" height="100" border="1">

Dit wordt:

Winkel	Uitgave in Euro
Krantenwinkel	2,00
Bakker	5,05
Slager	7,34
Bioscoop	7,50

We wachten nog even met de tabel te plaatsen in onze voorbeeldpagina. We zien eerst hoe kleuren aan de tabel te geven en extra opmaak.
Op het einde van dit hoofdstuk maken we dan een tabel voor onze voorbeeldpagina.

Klik hier om kleuren te geven aan onze tabel.