Het klink ingewikkeld en onnodig. Maar geloof me, u zult ze nodig hebben en u zult deze absoluut gebruiken! Ze zijn ideaal bij het opmaken van een pagina. U kunt gegevens op je pagina zodanig kwijt zoals u wilt. U kunt uw pagina gaan verdelen in cellen.
Oorspronkelijk was dit bedoeld voor rijen en kolommen met cijfers, maar het is voor alles bruikbaar. De pagina zoals u deze nu voor u ziet is ook opgemaakt middels tabellen.

Een tabel bestaat, zoals al eerder gezegd uit rijen en kolommen. De rijen zijn horizontaal en de kolommen zijn vertikaal. U kunt het eigenlijk vergelijken met ruitjespapier. Dit bestaat ook uit rijen en kolommen. En 1 zo'n vakje is een cel.

<TABLE> <TD> <TR>

Laten we maar gewoon beginnen, dan wordt het vanzelf wel duidelijk.
U begint met de label <TABLE> en eindigt met de label </TABLE>. Tussen deze twee labels voegt u voor iedere rij de labels <TR> </TR> toe. Voor iedere kolom gebruikt u tussen deze laatste twee labels <TD> en </TD>. Tussen <TD> en </TD> schrijft u de gegevens die u in de betreffende cel wilt plaatsen. Vrijwel alle HTML labels zijn hiervoor bruikbaar. In feite kunt u in een cel dus een complete mini-pagina samenstellen.
Een voorbeeld (zie voorbeeld nr. 1) zal een en ander verduidelijken. De brede kaderrand werd gemaakt door aan de <TABLE>-label de optie BORDER=4 toe te voegen.

Voorbeeld nr. 1

cel 1 cel 2 cel 3

cel 4 cel 5 de zesde cel

cel 7 cel 8 cel 9

<TABLE BORDER=4> <TR> <TD>cel 1</TD> <TD>cel 2</TD> <TD>cel 3</TD> </TR> <TR> <TD>cel 4</TD> <TD>cel 5</TD> <TD>de zesde cel</TD> </TR> <TR> <TD>cel 7</TD> <TD>cel 8</TD> <TD>cel 9</TD> </TR> </TABLE>

U merkt dat de tekst in de zesde cel langer is dan de rest. Daardoor is deze kolom ook breder geworden en past alles zich netjes aan. Ditzelfde zou ook voor de hoogte gelden. Alle cellen in 1 kolom zijn altijd even breed en alle cellen in 1 rij zijn altijd even hoog.
We gaan nog even verder.

Voorbeeld nr. 2

cel 1

cel 5 de zesde cel

cel 7
cel 9

<TABLE BORDER=4> <TR> <TD>cel 1</TD> </TR> <TR> <TD></TD> <TD>cel 5</TD> <TD>de zesde cel</TD> </TR> <TR> <TD>cel 7</TD> <TD><BR></TD> <TD ALIGN="right">cel 9</TD> </TR> </TABLE>

In de eerste rij is maar 1 cel gedefinieerd (zie <TD>cel 1</TD>). De browser maakt uit de andere 2 rijen echter op dat er toch 3 kolommen moeten zijn (zie </TR> <TR>'s). De cellen 2 en 3 worden gewoon niet getoond (ook niet in 3D).
Cel 4 wordt wel gedefineerd, maar wordt ook niet weergegeven omdat deze geen inhoud heeft (er staat niets in). Om een cel zonder inhoud toch te laten zien (3D weergave), moeten we te werk gaan als in cel 8. Hier staat ook geen tekst in, maar is een line-break gedefineerd <BR> (er kan ook een no back space ( ) wordt opgegeven). Dit is voor onze browser ook inhoud.

<CAPTION> </CAPTION>

U kunt ook titels geven aan TABLE's. U zag dat ik dat al bij de bovenstaande voorbeelden had gedaan (deze zijn namelijk ook uit TABLE's opgebouws (3 st.)). Titels ingeven is te doen door de label <CAPTION> en </CAPTION> toe te voegen in de TABLE. Ik zal u een voorbeeld (zie voorbeeld nr. 3) laten zien:

Voorbeeld nr. 3

Dit is een tabel.
cel 1

cel 5 de zesde cel

cel 7
cel 9

<TABLE BORDER=4> <CAPTION>Dit is een tabel.</CAPTION> <TR> <TD>cel 1</TD> </TR> <TR> <TD></TD> <TD>cel 5</TD> <TD>de zesde cel</TD> </TR> <TR> <TD>cel 7</TD> <TD><BR></TD> <TD ALIGN="right">cel 9</TD> </TR> </TABLE>

Als de optie ALIGN=BOTTOM wordt toevoegt aan de label <CAPTION>, dan komt de titel onderaan de TABLE.
U kunt zich voorstellen dat ok de tekst in de cellen verfraait kunnen worden. U bent hier vrij in. De tekst kan bold of italic getoon worden. De font-face kan worden gewijzigd.
Als u <TH> </TH> ingeeft in plaats van <TD> </TD> dan zal de tekst in deze cel direct vetter zijn. Dit doet u overigens alleen bij de eerste rij of kolom (deze worden dan ook automatisch worden gecentreerd.

Ik zal hiervan een voorbeeld geven, zie voorbeeld nr. 4.
Voorbeeld nr. 4

Dit is een tabel
kolom 1 kolom 2 kolom 3

Rij 1 cel 1

Rij 2 cel 5 cel 6

Rij 3 cel 7
cel 9

<TABLE BORDER=4> <CAPTION><B>Dit is een tabel</B></CAPTION> <TR> <TH></TH> <TH>kolom 1</TH> <TH>kolom 2</TH> <TH>kolom 3</TH> </TR> <TR> <TH>Rij 1</TH> <TD>cel 1</TD> </TR> <TR> <TH>Rij 2</TH> <TD></TD> <TD>cel 5</TD> <TD>cel 6</TD> </TR> <TR> <TH>Rij 3</TH> <TD>cel 7</TD> <TD><BR></TD> <TD>cel 9</TD> </TR> </TABLE>

<BORDER="x">

Borders, hmmm... door de optie BORDER=4 toe te voegen aan de TABLE-label kunt u in pixels de breedte van de borders aanpassen. Als u deze optie niet of BORDER=0 opgeeft zal er GEEN border te zien zijn (zoals deze pagina). Maar de opmaak zoals u die heeft bedoeld zal er nog steeds zijn. De border is alleen van toepassing voor de buitenkant. De lijnen hierbinnen zijn altijd idem. Ik zal hiervan een voorbeeld (zie voorbeeld nr. 5) geven. Maar voordat ik het voorbeeld laat zien wil ik graag vertellen dat het ook mogelijk is om een eigen kleur te geven aan een TABLE(border). Voeg hiervoor de optie BORDERCOLOR="#kleur" toe aan de TABLE-label. (let op: u moet wel een hexadecimale waarde opgeven). Dit is overigens ook mogelijk voor de achtergrond van een cel.

Voorbeeld nr. 5

cel 1

cel 5 de zesde cel

cel 7
cel 9

<TABLE BORDER=0> <TR> <TD>cel 1</TD> </TR> <TR> <TD></TD> <TD>cel 5</TD> <TD>de zesde cel</TD> </TR> <TR> <TD>cel 7</TD> <TD><BR></TD> <TD ALIGN="right">cel 9</TD> </TR> </TABLE>

Meer mogelijkheden

Er zijn nog meer opties. Het is mogelijk om cellen te 'linken' of bij elkaar te 'trekken' alsof dit 1 cel is. Stelt u zich het volgende voor: U wilt een pagina opmaken met 3 tekstkolommen, met bovenaan een titel, gecentreerd over de gehele breedte en halverwege een afbeelding over 2 kolommen. Dit zou er als volgt uit kunnen gaan zien (zie voorbeeld nr. 6):

Voorbeeld nr. 6

kolom-1 kolom-2 kolom-3

afbeelding

kolom-2 kolom-3

<=========>

cel 1 cel 2 cel 3

cel 4 cel 5 cel 6

cel 7 cel 8 cel 9

Om u de juiste voorstelling te geven heb ik de tabel-opbouw in 9 cellen er nog eens naast gezet.

Maar hoe is dit nu gemaakt ? We beginnen met een <TABLE BORDER=0>. Als u een kaderlijn om het geheel wilt hebben dan gebruikt u de optie BORDER=x. En over de titel hoef ik natuurlijk niets meer te vertellen.
De volgende stap is het definieren van de eerste rij, dus van links naar rechts, de cellen 1, 2 en 3. Daarna wordt het ingewikkelder. De eerste kolom bestaat eigenlijk uit de cellen 1, 4 en 7. Deze willen wij samenvoegen tot 1 grote (vertikale) cel. Ga hiervoor als volgt te werk:
Begin met <TR> om de eerste rij te definieren. Voor de eerste kolom gebruik je <TD> met daaraan toegevoegd de optie ROWSPAN=3, dit is om aan te geven dat deze cel drie rijen hoog moet worden. Dus: <TD ROWSPAN=3>. U vult de inhoud van de eerste kolom in en sluit deze uiteraard weer met </TD> af.
Nu kunnen we cel 2 beginnen met <TD>, gevolgd door de inhoud van deze cel en afsluiten met </TD>. de volgende rij met cellen 4, 5 en 6 is nu aan de beurt. We beginnen weer met <TR> en voor cel 4 hoeven we nu niets te doen. Deze staat 'gelinkd' met de eerste kolom en is dus eigenlijk samengevoegd met cel 1 en is dus al gedefineerd. Maar cellen 5 en 6 moeten nog worden samengevoegd voor de afbeelding. Dit doen we met <TD COLSPAN=2>, dit om aan te geven dat cel 5 2 kolommen breed moet worden. Daarna zet u op de gebruikelijke wijze je afbeelding erin (of tekst als u dat liever wilt). Daarna sluiten wij de hele boel weer af met </TR>.
De laatste rij hoeft nu niet echt moeilijk meer te zijn. U opent de rij met <TR>, cel 7 is al gedefineerd (die hoge kolom, weet u nog), dus gaan we cel 8 en 9 normaal defineren. De rij wordt gesloten met </TR> en de tabel met </TABLE>.

Je source-code van deze tabel ziet er dan uit zoals te zien is in voorbeeld nr. 7:

<TABLE>
<CAPTION>Titel</CAPTION>
<TR>
<TD ROWSPAN=3>inhoud van de eerste kolom</TD>
<TD>inhoud bovenste gedeelte kolom 2</TD>
<TD>inhoud bovenste gedeelte kolom 3</TD>
</TR>
<TR>
<TD COLSPAN=2><IMG SRC="plaatje.gif"></TD>
</TR>
<TR>
<TD>inhoud onderste gedeelte kolom 2</TD>
<TD>inhoud onderste gedeelte kolom 3</TD>
</TR>
</TABLE>

Enkele goedbedoelde adviezen

Als u TABLE's gaat maken voor uw pagina zult u merken dat deze heel erg flexibel zijn. Als het venster van je browser kleiner (of groter) wordt (gemaakt) zult u merken dat de TABLE zich zoveel mogelijk zal aanpassen.
U kunt -als u wilt- ook de breedte en de hoogte aanpassen als dat gewenst is. De optie WIDTH en HEIGHT kan worden opgeven in de <TD>-labels. Dit kan worden gedaan door de absolute breedte en/of hoogte op te geven in pixels, maar het is ook mogelijk in procenten. Dit zelfde is ook mogelijk voor de gehele breedte van de TABLE. Voeg hiervoor de optie WIDTH=x toe aan je <TABLE>-label aan het begin.

Iedere cel is leeg. Dat klinkt logisch, maar hier bedoel ik mee dat de font face opnieuw ingesteld moet worden zoals dit is gewenst. En wel voor iedere cel. Het is niet mogelijk dit in een keer te doen door 1 algemene label.