weballey logo
 
left Layout - alignment backnext right
homesearchsite mape-mail
basics
columns
< alignment >
title bars
faster pages
my layout
epilogue
      Put some text in both the left and right cell. Make sure one column of text is taller than the other. What you will see is that the shorter column will shift to the middle. On this site most navigation bars are much shorter than the main text part. On some it's the other way around. So both cells get a VALIGN attribute set to TOP. That way all contents will be pushed up.

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

    To get the navigation bar to center like on this site, an ALIGN attribute is added and set to center. You could also do this with a CENTER tag, but I prefer to do it this way.

<TD WIDTH="150" BGCOLOR="aqua" VALIGN="TOP" ALIGN="CENTER">

    You probably noticed the code is getting quite complex now. This will get worse. So now might be a good time to mention comment text. You can use this to remind yourself where you can find the text, the navigation buttons, or anything else. Text with arrows like the ones below will not be shown on a web page. This tag is especially designed for adding comments to your code. Put these lines above and below the part where it's safe to add code, without messing up your tables.

<!-- add text below this line -->
put page text here
<!-- add text above this line -->

    This way you can find your way inside the jungle of table code. Tables let you create great layouts, but you need a lot of code to do it. Code that all seems very similar, so you can easily lose your way. You can also inadvertently delete some of the table code when editing your files. Adding comment lines like these will help you avoid that. Have a look at the code of this page (right-click, view source). You will see several of these comments.

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