Les 3

Tabellen.

Tabellen zijn erg handig voor de indeling van je website. Je zult misschien denken wat moet ik met tabellen. Die zie ik nooit op een website. Maar ze worden wel gebruikt. De lijnen zijn namelijk weggewerkt. Een tabel in elkaar zetten vergt best wel even een hoop werk. We maken eerst even een nieuw bestand waarin we gaan oefenen met tabellen, daarna gaan we ze in de vorige code plaatsen. Zodat de website 1 geheel krijgt. Open een nieuw leeg veld en noem deze: tabellen.html.

Zet daar in het volgende:

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
</CENTER>
</BODY>
</HTML>

Je ziet nu een lege grijze website met als titel: "oefenen met tabellen".

Een tabel start je met de tag <TABLE>. Deze behoort aan het einde van de website ook weer gesloten te worden met </TABLE>. Zet <TABLE> onder <CENTER>. De tabel zal nu ook gecentreerd worden.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE>
</TABLE>
</CENTER>
</BODY>
</HTML>

We geven ook aan hoe dik de rand van de tabel moet zijn. Dit doen we om te kijken of de tabel goed is. Een rand van een tabel geef je aan met BORDER. De dikte van de lijn doe je als volgt: BORDER= "3" dit zet je tussen de tag <TABLE> achter TABLE.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER="3">
</TABLE>
</CENTER>
</BODY>
</HTML>

Je werkt in een tabel met rijen en cellen. Een nieuwe rij maak je met <TR>. <TR> gebruik je als je in de verticale lijn wilt werken. Een nieuwe cel in deze rij maak je met <TD>. Dit is dus in de horizontale kant. In het begin is dit nogal verwarrend.

We plaatsen nu <TR> onder <TABLE> We geven dus aan dat we een nieuwe rij willen maken. Je eindigt een <TR> met </TR>. Als je nu het bestand opslaat zal je niks zien.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER="3">
<TR>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

De <TD> tag zet je onder <TR>. Want je bouwt een nieuwe cel in een rij.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER="3">
<TR>
<TD></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Als je nu opslaat zie je een heel klein tabelletje.

Hoe komt het dat het zo klein is? Dit komt omdat de breedte en de hoogte nog niet zijn aangegeven. Je zet de hoogte en de breedte in een tag. De hoogte doe je met HEIGHT en de breedte met WIDTH. Hierachter zet je het = teken. De breedte of hoogte zet je tussen quotes. Je geeft eerste een totale breedte en hoogte van de tabel dit zet je in <TABLE>.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE HEIGHT="400" WIDTH="600" BORDER="3">
<TR>
<TD></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

De tabel is nu 1 vlak. We gaan hier nu verandering in brengen. We maken er 4 cellen van. Met een kruis in het midden. We voegen een extra <TD> in de tabel. Dit geeft nu 2 cellen naast elkaar. Vervolgens sluit je de <TR> met </TR> en open je een nieuwe <TR> en je voegt er opnieuw 2 keer <TD> in die ook weer wordt afgesloten.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE HEIGHT="400" WIDTH="600" BORDER="3">
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Als je het nu opslaat dan zie je nog geen verschil dit komt omdat er helemaal geen hoogtes of breedtes van de cellen zijn aangegeven. Je weet al hoe je dit moet doen.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE HEIGHT="400" WIDTH="600" BORDER="3">
<TR HEIGHT="200">
<TD WIDTH="300"></TD>
<TD WIDTH="300"></TD>
</TR>
<TR HEIGHT="200">
<TD WIDTH="300"></TD>
<TD WIDTH="300"></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Als je opslaat zie je dat er helemaal niks veranderd is. Dit komt omdat er nog geen inhoud in de cellen staat. We zetten nu wat tekst in de cellen.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE HEIGHT="400" WIDTH="600" BORDER="3">
<TR HEIGHT="200">
<TD WIDTH="300">Cel 1</TD>
<TD WIDTH="300">Cel 2</TD>
</TR>
<TR HEIGHT="200">
<TD WIDTH="300">Cel 3</TD>
<TD WIDTH="300">Cel 4</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

We zijn nu al best ver met de tabellen. We leren nu nog enkele dingen en dan is het goed toe te passen in de website. We leren nu om cellen samen te voegen. Cellen samenvoegen doe je met COLSPAN en ROWSPAN. ROWSPAN is om verticaal uit te lijnen en COLSPAN om horizontaal uit te lijnen. We passen COLSPAN toe op de bovenste twee cellen. De waarde die je tussen de quotes zet is de hoeveelheid cellen die je samen wilt voegen. Je zet COLSPAN="2" in de <TD> van de eerste cel. De tweede cel moet je verwijderen.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE HEIGHT="400" WIDTH="600" BORDER="3">
<TR HEIGHT="200">
<TD WIDTH="300" COLSPAN="2">Cel 1 en 2</TD>
</TR>
<TR HEIGHT="200">
<TD WIDTH="300">Cel 3</TD>
<TD WIDTH="300">Cel 4</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Tussen de tabellen zit nu een ruimte, deze kan breder of smaller worden gemaakt. Dit doe je met CELLSPACING. Om geen ruimte tussen te cellen te hebben zet je de waarde op 0.

<HTML>
<HEAD>
<TITLE>Oefenen met tabellen.</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE HEIGHT="400" WIDTH="600" BORDER="3" CELLSPACING="0" >
<TR HEIGHT="200">
<TD WIDTH="300">Cel 1</TD>
<TD WIDTH="300">Cel 2</TD>
</TR>
<TR HEIGHT="200">
<TD WIDTH="300">Cel 3</TD>
<TD WIDTH="300">Cel 4</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Je weet nu genoeg om een mooie tabel te maken. Als je BGCOLOR in een TD zet, dan kan je nog een cel een achtergrond kleur geven. Met BORDERCOLOR kan je de kleur van de rand bepalen. Met VALIGN="top" kan je de tekst bovenin de tabel zetten.

We kunnen het nu mooi toepassen in de website waarmee we bezig waren. Open index.html We gaan de website in een tabel zetten. De code is nu een stuk langer. Schrik niet, want het is allemaal wat je net geleerd heb.

<HTML>
<HEAD>
<TITLE>Mijn eerste html kennis</TITLE>
</HEAD>
<BODY BGCOLOR="#aaaaaa">
<CENTER>
<TABLE HEIGHT="600" WIDTH="800" BORDER="3" CELLSPACING="0" >
<TR HEIGHT="150">
<TD WIDTH="600" COLSPAN="2" VALIGN="top">
<CENTER>
<FONT SIZE="6" COLOR="blue">
Welkom op mijn eerste website.
</FONT>
</CENTER>
</TD>
</TR>
<TR HEIGHT="450">
<TD WIDTH="200" VALIGN="top">
<CENTER>
Hier kan het menu onder
</CENTER>
</TD>
<TD WIDTH="300" VALIGN="top">
<CENTER>
<BR />
<FONT SIZE="2" COLOR="green">
Gemaakt door (jouwnaam).
</FONT>
<BR />
<BR />
<IMG SRC="./plaatjes/adelaar.jpg">
<BR />
<BR />
<A HREF="http://www.vogelbescherming.nl">Bescherm deze vogel!</A>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Klik hier voor het voorbeeld

Volgende les