Waar vandaan: Thuis op Internet > Cursus website maken voor senioren >
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.