Toveren met tabellen
Les 1


De eerste tabel

We zullen maar direct gaan beginnen. Zoals in de andere cursussen gebruiken we ook deze keer Kladblok om onze voorbeeldjes te oefenen. Start het programmaatje dus maar even op. Zet, met kopieer-en-plak, het volgende basistekstje in je kladblok:

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

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.

<HTML>
<HEAD>
<TITLE>Toveren met tabellen</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR>
</TR>
</TABLE>

</BODY>
</HTML>

En natuurlijk heeft elke rij minimaal één cel nodig.

<HTML>
<HEAD>
<TITLE>Toveren met tabellen</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR>
<TD> </TD>
</TR>
</TABLE>

</BODY>
</HTML>

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.

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

Nu moet je iets in die cel zetten. In de cursus Het gebruik van frames heb ik meisjesnamen gebruikt. We gaan nu hun vriendjes er maar eens bijhalen. Laten we Jan eens in de <TD> cel zetten.

<TABLE>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>

Je bent nu de bezitter van een volledig functionerende tabel. Laad het in je browser en bewonder het resultaat! Als je alles goed gedaan hebt zou het er zo uit moeten zien...

Jan    
     

Geintje! Haha! Ik hoop dat je er niet van geschrokken bent. Wat je in werkelijkheid te zien krijgt is dit...

Jan

Geef jezelf een schouderklopje en wees trots op jezelf. Hoewel je het niet kunt zien, heb je zojuist je eerste echte tabel gemaakt!

Intro Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Les 7 Index