Stap 15 – tabellen

Soms wil je bij een ontwerp meer controle over de plaatsing van teksten. Je wilt niet dat alles over het gehele scherm komt te staan, maar bijvoorbeeld in twee kolommen. Om dit effect te kunnen creëren, maak je gebruik van tabellen.

Open de HTML file index.html weer en voeg de volgende codes eraan toe. 
<HTML>
<HEAD>
<TITLE>mijn eigen homepage</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<CENTER>
<IMG SRC="images/logo.gif" WIDTH=400 HEIGHT=161 ALT="logo">
<H2>Een korte introductie</H2>
</CENTER>
<TABLE WIDTH=100% BORDER=0>
<TR VALIGN=TOP><TD WIDTH=50%>
<P><B><FONT COLOR="#FF9B6A">Nora Tol Virtual Publishing</FONT></B> werd midden jaren '90 gestart,
toen <FONT COLOR="#FF9B6A">Nora Tol</FONT> begon met het aanbieden van allerlei internetdiensten,
zoals

<OL>
<LI> Webdesign</LI>
<LI> Webhosting</LI>
<LI> Domeinregistratie</LI>
</OL>
</TD>
<TD>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, <FONT COLOR="#FF9B6A">ElNorado Productions</FONT>,
dat zich richt op het maken en beheren van de inhoud van websites en social media. Dit zijn een
aantal van de aangeboden diensten:

<UL>
<LI> Schrijven van blogs en artikelen</LI>
<LI> Optimaliseren van bestaande content</LI>
<LI> Voorprogrammeren van social media berichten</LI>
</UL></P>
</TD></TR>
<TR><TD COLSPAN=2>
<CENTER>
<P><FONT SIZE=4>Kijk snel op haar <A HREF="http://www.elnorado.nl">website</A> voor meer informatie.
</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>
</TD></TR></TABLE>
</BODY>
</HTML> 

Sla het document op en bekijk het eens in een browser.

Met de codes
<TABLE WIDTH=100% BORDER=0>
<TR><TD WIDTH=50%>

wordt niet alleen een tabel geopend maar ook de eerste regel en de eerste kolom. Laten we het eens ontleden:
<TABLE WIDTH=100% BORDER=0>
</TABLE>

Met bovenstaande code begin en eindig je de TABLE-tag. Met WIDTH kun je aangeven hoe breed je het tabel wilt hebben. Door percentages te gebruiken zal de grootte van de tabel zich aanpassen op de grootte van het beeldscherm, dat op zijn beurt wordt bepaald door de resolutie van het beeldscherm. Met sommige layouts is dat niet handig en is het beter om de breedte in pixels aan te geven. Deze verandert niet per beeldscherm, waardoor je heel precies kunt aangeven waar bepaalde teksten of zelfs images moeten staan.
Je kunt ook een HEIGHT toevoegen. Dit is vooral handig te weten wanneer je een graphic geheel in het midden van het scherm wilt hebben. Dan maak je een tabel aan met een WIDTH van 100% en een HEIGHT van 100% en centreer je de inhoud.
Met BORDER kun je aangeven hoe dik de rand van de tabel moet zijn. Ik heb in het voorbeeld gekozen voor een onzichtbare border. Wil je precies zien wat je nu precies doet met het maken van een tabel, dan kun je dit het beste op 1 (pixel) zetten. Dan is de tabel goed zichtbaar.

Voorbeeld:
<TABLE WIDTH=100% BORDER=1 BORDERCOLOR=#000000>
</TABLE>

De toevoeging BORDERCOLOR=#000000 heb je voor het zichtbaar maken van een border helemaal niet nodig. Deze code zorgt ervoor dat de rand zwart weergegeven wordt. Dit werkt overigens alleen in MSIE.

<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
</TABLE>

De toevoegingen CELLPADDING=0 en CELLSPACING=0 worden veelal alleen gebruikt, wanneer een tabel gebruikt wordt om van een serie kleine graphics 1 afbeelding te maken. Met CELLPADDING kun je de witruimte binnen een cel beperken of zelfs, zoals in dit voorbeeld, compleet uitzetten. Zo zou tekst nu precies tegen de rand aankomen. Met CELLSPACING kun je de witruimte tussen de cellen vergroten of verkleinen. In dit geval is ook dit uitgezet. Teksten in twee naast elkaar gelegen cellen zullen nu precies tegen elkaar aankomen.

<TABLE WIDTH=100% BORDER=1>
<TR>
</TR>
</TABLE>

Met <TR> open je de eerste regel van de tabel. TR staat voor Table Row (tabel rij). Een tabel wordt pas bruikbaar wanner een tabel row ook cellen bevat. Dit maak je als volgt aan:
<TABLE WIDTH=100% BORDER=1>
<TR><TD>
</TD></TR>
</TABLE>

De TD-tag staat altijd tussen de TR-tag. TD staat voor Table Data. De naam zegt al dat je daar je data kwijt kan, of het nu tekst of grafische elementen betreft.

Bovenstaande voorbeeld genereerd 1 kolom die een breedte heeft van 100%. Meerdere cellen maak je op deze manier aan:

<TABLE WIDTH=100% BORDER=1>
<TR><TD>mijn eerste tabel kolom 1</TD><TD> mijn eerste tabel kolom 2</TD></TR>
</TABLE>

De cel wordt net zo groot als de data toelaat en bepaald daardoor tevens de grootte van eventuele cellen die op rijen eronder komen.

Het maken van een tweede rij doe je op de volgende manier:

<TABLE WIDTH=100% BORDER=1>
<TR><TD>mijn eerste tabel kolom 1</TD><TD> mijn eerste tabel kolom 2</TD></TR>
<TR><TD>mijn eerste tabel kolom 3</TD><TD> mijn eerste tabel kolom 4</TD></TR>
</TABLE>

Je kunt in een tabel zoveel rijen maken als je wilt en een rij mag zoveel cellen bevatten als je wilt. Wel zul je merken dat je beperkt wordt door de grootte van de inhoud en de breedte van het scherm.

Wanneer je op de eerste rij twee cellen hebt gebruik, zal dat als standaard verwacht worden voor de rijen in de rest van de tabel. Soms komt dat helemaal niet uit en heb je weer de volledige breedte nodig van de tabel. Dit kun je als volgt aangeven:

<TABLE WIDTH=100% BORDER=1>
<TR><TD>mijn eerste tabel kolom 1</TD><TD> mijn eerste tabel kolom 2</TD></TR>
<TR><TD COLSPAN=2>mijn eerste tabel kolom 3</TD></TR>
</TABLE>

Als je dit in je browser gaat bekijken zie je dat kolom 3 weer breedte heeft van 100%. Met COLSPAN geeft je aan hoe breed de kolom moet zijn. In dit geval dus 2 cellen/kolommen breed.

Het kan ook gebeuren dat je de ruimte in de lengte nodig hebt. Dit doe je als volgt:

<TABLE WIDTH=100% BORDER=1>
<TR><TD ROWSPAN=2>mijn eerste tabel kolom 1</TD><TD> mijn eerste tabel kolom 2</TD></TR>
<TR><TD> mijn eerste tabel kolom 3</TD></TR>
</TABLE>

Met ROWSPAN geef je aan hoeveel rijen deze cel moet bevatten. In dit geval dus twee. Op de tweede rij begin je met de codering dus al gelijk met het invullen van de tweede kolom (in dit geval het rechterkolom).

Zowel aan de TR- als de TD-tag kun je bepaalde waarden toevoegen. Wanneer je dit aan <TR> doet, geldt het voor alle cellen op die rij. Wanneer je de waarde aan <TD> toevoegt geldt deze alleen voor die cel. Over welke waarden heb ik het? Bijvoorbeeld waarden om de plaats van de inhoud van een cel te definieren:

<TABLE WIDTH=100% BORDER=1>
<TR ALIGN=RIGHT VALIGN=TOP><TD ROWSPAN=2>mijn eerste tabel kolom 1</TD><TD> mijn eerste tabel kolom 2</TD></TR>
<TR><TD> mijn eerste tabel kolom 3</TD></TR>
</TABLE>

Met de toevoegingen ALIGN=RIGHT en VALIGN=TOP wordt de tekst in beide cellen op de eerste regel helemaal rechts bovenaan geplaatst. Je kunt de volgende posities gebruiken:

ALIGN=LEFT voor links
ALIGN=RIGHT voor rechts
ALIGN=CENTER voor gecentreerd

VALIGN=TOP voor bovenaan
VALIGN=BOTTOM voor onderaan

Wat je ook kunt toevoegen zijn waarden met betrekking tot achtergronden:

<TABLE WIDTH=100% BORDER=1>
<TR><TD BGCOLOR=#FFFFE7 ROWSPAN=2>mijn eerste tabel kolom 1</TD><TD> mijn eerste tabel kolom 2</TD></TR>
<TR><TD> mijn eerste tabel kolom 3</TD></TR>
</TABLE>

Met de toevoeging BGCOLOR=#FFFFE7 wordt het eerste kolom voorzien van een achtergrondkleur. Een achtergrondplaatje kan ook:

<TABLE WIDTH=100% BORDER=1>
<TR><TD BACKGROUND="images/background.gif" ROWSPAN=2>mijn eerste tabel kolom 1</TD><TD> mijn eerste tabel kolom 2</TD></TR>
<TR><TD> mijn eerste tabel kolom 3</TD></TR>
</TABLE>

Een achtergrondkleur of -plaatje voor de hele tabel kun je instellen bij de TABLE-tag. Controleer wel of Netscape ook het gewenste resultaat weergeeft. In tegenstelling tot MSIE heeft Netscape de gewoonte de plaatjes per kolom weer te geven. 

Stap 15c – een tabel in een tabel

Het is met de TABLE-tag mogelijk om een tabel in een tabel te zetten, bijvoorbeeld:
<TABLE BORDER=0 BGCOLOR=#000000>
<TR><TD>
<FONT COLOR=#FFFFFF>
Hier volgt het volgende tabel:
<P>
<TABLE BORDER=0 BGCOLOR=#FFFFFF>
<TR><TD>
dit is de tweede tabel
</TD></TR>
</TABLE>
</FONT>
</TABLE>

Zoals je ziet loopt de ene tabel rondom de ander en zo loopt zelfs ook de FONT-tag.
Zorg er hier wel voor dat je alle tags afsluit.

Stap 15d – tabel troubleshooting

Controleer altijd je tabellen in zowel MSIE als Netscape. Je zult merken dat Netscape een stuk preciezer is. Wanneer je een TABLE-, TR- of TD-tag niet hebt afgesloten heeft dit in Netscape het resultaat dat (een gedeelte van) een tabel niet weergegeven wordt.

Toekomst van tabellen:
Er zijn veel meningen over het gebruik van tabellen in websites. Sommige mensen zeggen dat een site daardoor moeilijk te doorzoeken is door een zoekmachine. Zelf heb ik dat eigenlijk nooit ondervonden. Maar feit is wel dat iedereen het gebruik van tabellen toch zoveel mogelijk wil verminderen, waardoor je alternatieven moet gaan zoeken. Binnen HTML is het alternatief het werken met de <DIV>-tag in combinatie met (positionering door) CSS. In deze cursus wordt dit niet behandeld, maar als je verder gaat met webdesign is dit zeker de moeite waard om verdere informatie over te zoeken

Naar stap 16

Bookmark the permalink.

Comments are closed