Extra uitleg tabellen

geschikt om na les 11 te maken

Voordat ik uitleg wat een tabel doet eerst even dit in html is het zeer belangrijk dat je goed op de sluittags let want vergeet je dat kan er veel mis gaan. Ook is het belangrijk dat de sluittag op de juiste plaats staat dus in volgorde van plaatsen.
<html><body></body></html>
Dit moet dus op bovenstaande manier dus niet zoals hier onder.
<html><body></html></body>
Dit is een veel voorkomende fout dus let hier goed op dan voorkom je een hoop gedoe. Bijna iedere tag heeft een sluittag maar zoals gewoonlijk zijn er uitzonderingen, de img tag b.v. die heeft geen sluittag en verder zijn er nog een paar die we in de mails niet zovaak gebruiken. We kennen namelijk nog <BR> daarmee begin je een nieuwe regel en <P> waarmee je een nieuwe paragraaf begint. Kijk voor je zelf maar eens wat dit doet als je in de bron een tekst in typt.

 

 

De tabellen

Tabellen gebruiken we om een indeling van je scherm te maken en daarmee is het simpeler om plaatjes en tekst precies daar neer te zetten waar wij willen. Een tabel is net zo iets als een Excel werkblad en bestaat uit een aantal rijen en kolommen. Het deel waar we tekst of plaatjes inzetten noemen we een cel een rij is een aantal cellen naast elkaar, een kolom is dus onder elkaar. De kleinste tabel bestaat altijd uit 1 rij en 1 kolom maar hier hebben we niet veel aan want dan is er ook maar 1 cel.

U weten we dus zo'n beetje wat een tabel is, maar hoe maak je dat nou in een script zal de vraag zijn. Om dat te doen hebben we 3 tags nodig: de eerste om te bepalen dat we een tabel willen zien <TABLE></TABLE>


 


 Dan moeten we een tag hebben om een rij te maken <TR></TR> en daarin nog een cel <TD></TD>

Als we dit in elkaar gaan zetten dan zien we dus dit staan:

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

Op zich is is dit een complete tabel maar als je dit zo in je html zet dan zie je alleen het woordje tekst staan dus hebben we nog wat extra opties nodig om een en ander wat te versieren.

Als eerste gaan we er een rand omheen zetten en dat doen we door in de tabletag border=3 te zetten. Dan willen we nog wat kleur en dat doen we voor nu met bordercolorlight=#000000 en bordercolordark=#ffffff.Verder staat het ook wel netjes als je wat ruimte maakt en dat doen we met cellspacing=10 en cellpadding=10. Cellspacing staat voor de ruimte die tussen de rand van de tabel en de cel zit en met cellpadding zorg je er voor dat je tekst niet direct tegen de zijkant van de cel zit. Ook willen we nog weten hoe breed de tabel moet zijn en dat kan op 2 manieren met een absoluut getal dat is dus width=500px of met een relatief getal width=60%. Dan is er nog een laatste optie en wel align=center en daar zetten we de tabel mee in het midden

Hiermee hebben we al een aardig uitziende tabel genaakt waar we een plaatje of tekst in kunnen zetten. Maar ik wil toch nog even de opties voor de andere tags aanhalen. Het eerste is simpel: dat is de tr en die heeft geen opties. Dan de td: daar kunnen we ook nog niet zoveel mee doen maar we kunnen wel het plaatje of de tekst in het midden zetten. Dit doe je door ook daar een align=center te gebruiken.


 

 Hier heeft het een iets andere functie want de align in de tabletag zet de tabel in het midden van je scherm en in de td zet het de inhoud in het midden. Bij een plaatje is dat meer dan genoeg maar bij tekst

komt dat wat vreemd over. Dus als je de td voor tekst gebruikt zet je er ook nog eens Valign=top bij zodat je mooi boven aan begint.

Het begint nu wel een lang verhaal te worden dus gaan we op de volgende pagina verder.