Tables allow you to position everything exactly where you want them. How do you do this? Each table may contain from one to any number of rows and columns called cells which are laid out in a grid. Inside of any of these boxes or cells in this grid, you may put another table. We'll use this web page as an example for this tutorial.

So lets take a look at our web page

  First, we have the main table which defines the outside boundary of this web page and it has several rows or cells. The top row is where the graphic header is located. The second row is where the pull-down menu buttons are, and the third row is where the main body of this web page is located

   Inside this third row or cell is another table with three columns. These columns define the left and right side bars and the center area where this text is located.

  Confused? Don't worry, a few pictures are worth a thousand words. I'll walk you through it 'step by step'.

  The picture below illustrates the first (outside) table which defines the width and major sections of this web page. There are three rows. The top row is the header graphics, the middle row is the menu and the bottom row is the body of the web page.

   For instance, I will walk you through creating this web page using FrontPage. Click on the 'Table' pull down menu option and select 'Insert', then 'Table'. Select '3' rows and '1' column, then click the 'OK' button. That's all there is to creating a table.

  Now 'right click' on the table and select 'Table Properties'. Check the checkbox labeled 'Specify Width' and type in '780'. This will now be the width of the web page.

  If you want your web page to be centered on the screen, 'right click' on the table and select 'Table Properties' again. Then select 'Centered' from the pull down menu for 'Alignment' at the top of the 'Table Properties' window.

  Hint: 780 pixels plus a few more pixels for the scroll bar will give you the standard 800 pixel width that most web sites are designed for in today's world.

  In the illustration below, we will create a new table inside the body part of the first table (red area). This will create the areas for the side bars and where the main text will go.

  Click inside the body (bottom row) of the first table and repeat the above steps to create a table. Except, this time we will tell it to create '1' row and '3' columns (create the table in red).

  Now, right click on the left most column of this new table and select 'Cell Properties', check the checkbox to specify width and type in '190'. Do the same thing with the column on the right.

  Hint: you do not need to specify the width of the middle column where the text will go. When you type in text, it will expand until it reaches it's maximum width of 400 pixels.

  If you want your side bars to have color, right click inside the side bar and select 'Cell Properties', then select a color from the 'Color' pull-down list in the 'Background' section.

  Are you starting to feel comfortable with this now?  Good, lets do some more things. Below is a close up view of the left side bar.

  Click inside the side bar and create a new table as before and select as many rows as you want and only '1' column (create the table in blue). As before, you can define a color for the whole table or for each cell by right clicking and selecting the appropriate option of either 'Table Properties' or 'Cell Properties'.

  Now you can create the sub headers for the side bar by creating a table in every other cell (green tables). These tables have '1' row and '2' columns.

  The cell on the left is for the graphic file and the one on the right is for the text of the sub title. Again, you can set the cell properties to a color of your choice for these sub titles.

  Hint: In the table properties, always set the 'Border Size' to zero unless you want to actually display a border. Even though you may not see the border in Internet Explorer, Netscape has a bug which will always display a border on tables unless the border size is set to zero. This is true even if the border color is set to be the same as the background color.

  Now you have the layout for your web page. Insert your header graphic in the cell at the top of the page. Insert your menu buttons in the cell just below the header graphic. Insert your side bar title graphic in the left cell of the green tables and save this file as your page template.

  Whenever you want to create a new page, just open this template file. Then add the text into your side bar and the body of the page and save it as the web page filename you want. Yes, it's that easy!

Congratulations...
You are now a Master of Tables!

Article by Don Itjen
at 6star.net