We zullen maar direct gaan beginnen. Zoals in de andere cursussen gebruiken we ook deze keer Notepad (Kladblok) om onze voorbeeldjes te oefenen. Start het programmaatje dus maar even op. Zet, met copy-paste, het volgende basistekstje in je editor:
<HTML>
<HEAD>
<TITLE>Toveren met tabellen</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Sla het op als table1.html ergens in een nieuwe map. Start nu ook je browser en draai het tegelijk met Notepad. Je kunt nu je HTML-documenten bewerken en, na opslaan, direct het resultaat bekijken door in je browser op de reload-knop te klikken. Als je browser geen reload-knop heeft wordt het hoog tijd om een nieuwe te downloaden.
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 Grapje! Haha! Ik hoop dat je er niet van geschrokken bent. Dit is wat je echt gemaakt hebt...
Jan Geef jezelf een schouderklopje en wees trots op jezelf. Je hebt zojuist je eerste tabel gemaakt!
Inleiding Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Les 7 Index