De opbouw van tabellen heeft eigenlijk maar 3 tags:
<table>
De table-tag. Deze tag gebruik je om de browser te vertellen: “dit is een tabel”. Je hebt ook nog een paar opties tot je beschikking.
<tr>
De tr-tag definieert een horizontale rij cellen (tr = tabel row = tabelrij).
<td>
De td-tag specificeert een afzonderlijke cel in een tabelrij (td = tabel data = tabel gegevens).
Een tabel bestaat dus uit rijen die op hun beurt weer bestaan uit cellen.
Jouw eerste tabel:
We maken eerst een nieuwe webpagina:
<html>
<head>
<title>Toveren met tabellen</title>
</head>
<body>
</body>
</html>
Sla het bestand op als: table1.html
Zet nu de table-tags er in.
Je zegt nu niets meer dan :”hier begint een tabel en hier eindigt diezelfde tabel”.
<html>
<head>
<title>Toveren met tabellen</title>
</head>
<body>
<table>
</table>
</body>
</html>
Elke tabel heeft minimaal één rij nodig.
Een rij begint en eindigt met een tr-tag (tr = table row = tabelrij).
<body>
<table>
<tr>
</tr>
</table>
</body>
En natuurlijk heeft elke rij minimaal één cel.
Een cel begint en eindigt met een td-tag (td = table data = tabel gegevens).
<body>
<table>
<tr>
<td></td>
</tr>
</table>
</body>
Om de zaak wat overzichtelijker te houden schrijf ik van nu af aan alleen nog maar wat tussen de table-tags staat.
Onnodig te zeggen dat de rest natuurlijk wel in je document moet blijven staan.
Nu moet je iets in die cel zetten.
<table>
<tr>
<td>Jan</td>
</tr>
</table>
Je hebt nu een volledig functionerende tabel gemaakt.
Sla de pagina op en bekijk hem in je browser. Het resultaat is niet spectaculaair, hè?
Maar schrik niet en geef jezelf een schouderklopje.Hoewel je het niet kunt zien, heb je zojuist je eerste echte tabel gemaakt!
Tabel – afmetingen & randen:
Wat je net in je browser zag leek nog niet op een tabel.
We zullen er eens een kader omheen zetten om je te laten zien dat het wel degelijk een tabel is. Daarvoor voegen we de optie border=”1″ aan de table-tag toe.
<table border=”1″>
<tr>
<td>Jan</td>
</tr>
</table>
Als je de pagina nu opslaat en in de browser het resultaat bekijkt, dan zie je een tabel met één cel.
Ik neem aan dat je begrepen hebt dat de standaardwaarde voor deze optie border=”0″ is.
Wat dacht je van een iets groter kader?
<table border=”5″>
<tr>
<td>Jan</td>
</tr>
</table>
Wanneer je geen afmetingen opgeeft wordt de tabel zo groot als nodig is.
<table border=”3″>
<tr>
<td>Jan, Frank en Henk</td>
</tr>
</table>
Het is niet zo moeilijk om afmetingen te manipuleren.
We kunnen de optie width aan de table-tag toevoegen. De breedte kan opgegeven worden in procenten of in pixels.
<table border=3 width=”75%”>
<tr>
<td>Jan, Frank en Henk</td>
</tr>
</table>
Om het verschiltussen procenten en pixels voor de optie breedte duidelijk te maken gebruiken we de volgende code:
<table border=”3″ width=”75%”>
<tr>
<td>Jan</td>
</tr>
</table><br>
<table border=3 width=”75″>
<tr>
<td>Jan</td>
</tr>
</table><br>
<table border=3 width=”50%”>
<tr>
<td>Jan</td>
</tr>
</table><br>
<table border=3 width=”50″>
<tr>
<td>Jan</td>
</tr>
</table
De table-tag kent nog een derde optie: height.
Daarmee kunnen we
de hoogte van een tabel regelen. Ook hier kan de hoogte weer opgegeven worden in procenten of in pixels.
<table border=”3″ width=”100″ height=”75″>
<tr>
<td>Jan</td>
</tr>
</table>