HTML les 6 – Tabellen
Je hebt tekst op je site, plaatjes erbij. Nu wil je dat eens goed en handig
plaatsen. Zonder tabellen is dat niet zo eenvoudig, maar met tabellen kun je een
heleboel. Heel veel sites maken gebruik van tabellen. In deze cursus ga je leren
hoe je tabellen handig en effectief in je site gebruiken kunt.
Stel je wilt wat gaan vertellen over vier automerken. De Volkswagen, de Citroën,
de Ford en de Mercedes. Dat kun je als volgt doen.
(Beweeg met de muis over
het plaatje en je ziet de html-code.)
Maar dit ziet er toch al beter uit. Let op er staat nu een tabel in:
Het element voor een tabel is <table> aan het einde van de tabel staat een
afsluiting, namelijk </table>.
Tabel elementen.
Zoals je ziet zijn er een aantal elementen bijgekomen. Deze gaan we eens nader
bekijken en toelichten.
Tussen de begintag <table> en de eindtag
</table> komen alle andere elementen te staan voor de tabel.
Voor elke rij komt de begintag <tr>. Aan het eind volgt
</tr>. Hiertussen komen de elementen te staan voor de cellen van
de tabel.
Voor elke cel tik je de tag <td>, deze eindig je met
</td>
Om het voor jezelf wat overzichterlijker te maken is het een idee om je
tags steeds wat te laten inspringen op het moment dat je ze opmaakt.
Overzicht
Hieronder zie je een overzicht van de opbouw van zo’n tabel, met
daarbij de betreffende codes.
Tabel maken
We gaan een tabel maken. Als eerste neem je de opmaak van een gewoon html-document, zoals geleerd
in de eerste lessen.
<html>
<head>
<body>
</body>
</head>
</html>
Deze gaan we uitbreiden tot een tabel, met drie regels en drie cellen naast elkaar, zoals hierboven in de
tekening. Op zich is het handig om zo’n tekening te maken voor jezelf als je een tabel gaat maken. Je weet dan
zeker dat je geen fouten maakt. Je krijgt dan deze code.
<html>
<head>
<body>
<table border="1">
<tr>
<td>
Mercedes
</td>
<td>
Ford
</td>
<td>
Volkswagen
</td>
</tr>
<tr>
<td>
100
</td>
<td>
200
</td>
<td>
300
</td>
</tr>
<tr>
<td>
Leuk
</td>
<td>
Spannend
</td>
<td>
geweldig
</td>
</tr>
</table>
</body>
</head>
</html>
Het inspringen is bedoeld om het geheel wat overzichterlijker te maken voor als je iets terug zoekt.
Hieronder zie je het resultaat.
| Mercedes | Ford | Volkswagen |
| 100 | 200 | 300 |
| Leuk | Spannend | geweldig |
Opdracht 1
Maak zelf een tabel
Ga nu zelf eens aan de slag met het maken van een dergelijke tabel. Kijk goed naar het voorbeeld.
Doe het stap voor stap. Eerst bedenken hoe de tabel eruit ziet, daarna tekenen en de tags erbij zetten.
Dan de code aanmaken. Opslaan en bekijken in je browser.
Attributen
Bij de meeste elementen horen attributen. Attributen zijn aanvullingen voor elementen. Zo zag je in het
voorbeeld al achter <table> het attribuut border=”1″ staan. Dit houdt in dat er een rand van 1 pixel
breed om de tabel komt te staan. Daarnaast heb je nog een aantal aanvullingen. Deze worden hier niet allemaal
behandeld, alleen de belangrijkste. Dit doen we ook bij de <tr> en de <td>.
<table>
– border, hiermee bepaal je de rand rondom de tabel. Als je geen rand wilt zet je deze op nul (0).
– cellpadding, stelt de ruimte in tussen de rand van de cel en de tekst in de cel.
– cellspacing, stelt de ruimte in tussen de cellen onderling.
– width, bepaalt de grootte van de tabel in procenten (%) of in pixels.
<tr>
– bordercolor, om de randkleur van een rij te bepalen.
<td>
– align, is er voor om te bepalen aan welke kant de tekst wordt uitgelijnt (left, center of right).
– bgcolor, bepaalt de achtergrondkleur van de cel.
– valign, komt de tekst boven (top), midden (middle) of onderin (bottom) de cel te staan?
– width, bepaalt de grootte van de cel in procenten (%) of in pixels. De eerste cel bepaalt dit
voor de andere cellen van de rij.
Rowspan en colspan
Hiermee kun je hele handige dingen doen. Namelijk een aantal cellen overbruggen. Dit attribuut hoort
bij <td>. Met het attribuut colspan bepaal je het aantal kolommen. Met rowspan het aantal rijen.
Een voorbeeld.
Horizontaal worden er bovenaan drie cellen overbrugt.
Verticaal worden er vanaf de tweede rij twee cellen overbrugt.
In ons voorbeeld wordt de code als volgt:
<html>
<head>
<body>
<table border=”1″>
<tr>
<td colspan=”3″>
Mercedes
</td>
</tr>
<tr>
<td rowspan=”2″>
100
</td>
<td>
200
</td>
<td>
300
</td>
</tr>
<tr>
<td>
Spannend
</td>
<td>
geweldig
</td>
</tr>
</table>
</body>
</head>
</html>
| Mercedes | ||
| 100 | 200 | 300 |
| Spannend | geweldig | |
Ga er eens mee aan het experimenteren, daarvan leer je het meeste.
