weballey logo
 
left Layout - columns backnext right
homesearchsite mape-mail
basics
< columns >
alignment
title bars
faster pages
my layout
epilogue
      Next thing is to add an extra column, to hold the navigation bar. 150 pixels is a good size to start with, leaving 425 pixels for the rest of the page. Fix both sizes, that will prevent the table from shifting. If only one is fixed it will grow when more text is put inside it. No matter what size you have set for it. Try putting some text in it and watch what happens.

<TABLE BORDER="0" WIDTH="575"><TR>
<TD WIDTH="150">navigation bar</TD>
<TD WIDTH="425">main page</TD>
</TR></TABLE>

    The text part is getting narrower, but that is not a bad thing. Reading long lines is hard on your eyes. They may have trouble getting to the beginning of the next line, simply because the distance is too large. Sometimes you may start reading the same line again. Other times you find you've skipped a line. Ten to fifteen words on a line is a good rule of thumb.

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

    The BGCOLOR attribute will color the table aqua, or light blue. You won't need an image anymore for your background, saving you bandwidth and loading time. The text in the right column will collide with this bar. Or at least be very close to it. There is not enough space to seperate the text from eachother. The easiest way to give it some room to breathe, is to add a narrow empty column between them.

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

    The narrow bar will be 25 pixels wide and the text bar gets smaller again. Still wide enough, but quite close to the desired line length of 15 words max. Some browsers tend to collapse empty cells. So there needs to be something in it, preferably invisible. Here a simple non breakable space (&nbsp;) is used, a special HTML character. By now the page already has a shape quite similar to this site.

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

    One thing is still missing. Tables have a default cell spacing and padding. So adding up all numbers plus the spacing and padding, you would go overboard on 575. This still could mess up the exact layout. To further constrain the table both are set to zero. Now things will add up precisely.

goto top  
leftCopyright © Gerben Hoekstra - All rights reserved backnext right