cursus 2: toveren met TABELLEN

Les 1


Intro


Hallo, daar ben ik weer weer! Welkom terug bij de serie cursussen over het gebruik van HTML. Deze keer ga ik je vertellen hoe je de "finishing touch" op je homepage kunt aanbrengen met behulp van tabellen.
Mischien vraag je je af wat je met tabellen moet. Als je niet beter weet dan dat een tabel zoiets is als dit, dan moet je je maar eens proberen voor te stellen hoe die flitsend uitziende pagina's zoals deze gemaakt worden!
Juist, dit soort pagina's worden gemaakt met tabellen. Geloof je het niet? Hier is dezelfde pagina, maar dan met een egale achtergrond en de kaders zichtbaar.
Het hele tabellenverhaal bestaat in pincipe uit niet meer dan drie 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).

Resumerend: Een tabel bestaat uit rijen die op hun beurt weer bestaan uit cellen.

  Dit      
<--Dit--- ----is---- -----een---- ---tabel-- ----rij-->
  een   cel  
  kolom     cel

Dit was tabellen in een notedop. We zij nu zover dat we eens een paar tabellen kunnen gaan maken! We gaan er hierbij van uit dat je wel wat weet van HTML. Zo niet, doe dan eerst de cursus 'HTML voor beginners'!


De eerste tabel


We zullen maar direct gaan beginnen. Zoals in de andere cursussen gebruiken we ook deze keer Kladblok om de code in te typen. Start Kladblok dus op. Zet, met kopieer-en-plak, het volgende code in je kladblok (een standaard HTML-pagina):

<html>
<head>
<title>Toveren met tabellen</title>
</head>
<body>

</body>
</html>

Sla het bestand op als table1.html in een nieuwe map. Start nu ook je browser (zonder Klablok te sluiten). Je kunt nu je html-documenten bewerken en, na het opslaan, direct bekijken door in je browser op de refresh-knop te klikken.
In het vervolg zet ik weer alleen neer wat er tussen de table-tags gebeurt. De rest zul je er telkens zelf weer bij moeten denken.
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.

Jan
<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!


Tabelranden


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.

Jan
<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?

Jan
<table border="5">
<tr>
<td>Jan</td>
</tr>
</table>

Of een enorm kader?

Jan
<table border="25">
<tr>
<td>Jan</td>
</tr>
</table>


De afmetingen


Wanneer je geen afmetingen opgeeft wordt de tabel zo groot als nodig is.

Jan, Frank en Henk
<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.

Jan, Frank en Henk
<table border=3 width="75%">
<tr>
<td>Jan, Frank en Henk</td>
</tr>
</table>

Om het verschiltussen procenten en pixeld voor de optie breedte duidelijk te maken gebruiken we de volgende code:

Jan

Jan

Jan

Jan
<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.

Jan
<table border="3" width="100" height="75">
<tr>
<td>Jan</td>
</tr>
</table>


einde les 1
naar les 2