weballey logo
 
left Layout - columns backnext right
homesearchsite mape-mail
basics
< columns >
alignment
title bars
faster pages
my layout
epilogue
      De volgende stap is het toevoegen van een extra kolom, die de navigatiestrook bevat. 150 pixels is een aardige breedte, zodat je 425 overhoudt voor de rest van de pagina. Fixeer beide waarden, om verschuiven in de tabel tegen te gaan. Als slechts een is gefixeerd, kan deze groeien, als er meer in staat dan in de andere kolom. Het maakt dan niet uit wat voor afmeting je hebt ingesteld. Zet er eens wat tekst in, en kijk wat er gebeurt.

<TABLE BORDER="0" WIDTH="575"><TR>
<TD WIDTH="150">navigatiestrook</TD>
<TD WIDTH="425">tekstgedeelte</TD>
</TR></TABLE>

    Het tekstgedeelte is nu kleiner, maar dat is geen verkeerde zaak. Lange regels zijn vermoeiend voor je ogen. Hoe langer ze zijn, hoe moeilijker het wordt om van het einde van een regel naar het begin van de juiste volgende regel te gaan. Simpelweg omdat de afstand te groot is. Je kunt op dezelfde regel uitkomen, maar ook een regel verder. Tien tot vijftien woorden per regel is een aardige richtlijn.

<TD WIDTH="150" BGCOLOR="aqua">

    Het BGCOLOR atttribuut kleurt de tabel aquamarijn, oftewel lichtblauw. Je hebt op deze manier geen achtergrondplaatje nodig. Dat scheelt weer downloadtijd en bandbreedte. De tekst in de rechterkolom staat direct tegen de linker aan. Of er in ieder geval vlak bij. Om wat ruimte te krijgen tussen de tekst en de linkerkolom, voegen we een smalle lege kolom toe.

<TD WIDTH="150" BGCOLOR="aqua">navigation bar</TD>
<TD WIDTH="25">&nbsp;</TD>
<TD WIDTH="400">main page</TD>

    Deze smalle kolom is hier 25 pixels breed, de tekst wordt weer wat smaller. Nog steeds breed genoeg, en al vrij dicht bij de gewenste regellengte van 15 woorden. Sommige browsers laten lege cellen niet zien. Dus moet er iets in staan, in dit geval het liefst onzichtbaar. Hiertoe wordt een "non breakable space" (&nbsp;) gebruikt, een speciaal html teken. De pagina begint nu al aardig op de pagina's van deze site te lijken.

<TABLE BORDER="0" WIDTH="575" CELLSPACING="0" CELLPADDING="0">

    Een ding ontbreekt echter nog. Tabellen hebben een standaard cellspacing en cellpadding. Dus als je alle afmetingen bij elkaar optelt, klopt het sommetje niet. Je komt boven de 575 uit. Dit kan de layout alsnog verstoren. Om dit te voorkomen worden ze allebei op nul ingesteld. En nu klopt de som wel.

goto top  
leftCopyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right