Table 6: Layered Tables
If you want to get away from the top and left borders that many sites use for design, consider TABLES.
Tables can hold many things, text, images, flash, iframes and keep the shape YOU INTEND even when the window size changes.
I have been asked how I created my home page design.
The 3 column design is done using a series of TABLES.
The two iframes below will demonstrate the construction technique.
Scroll up and down to see the whole page, like normal and with all the tables showing.
IFRAME 1: This is the way my site looks normally (as of 02-29-08).
IFRAME2: This is the way my site looks when I force all tables to have a RED border.
Now you see the same page, with all the construction showing plainly.
As you will see, I have a ONE ROW table on the top that holds my LOGO, search and Welcome.
Then below that, I have a 3 column table. This table holds many other tables!
I have several smaller tables inside the large 3 column table.
Some of those tables have the borders turned on to make horizontal lines that separate sections.
Some tables hold text. Some hold buttons, some hold images and text, and even have 2 iframes on the right side.
I really like the 3 column table idea and using smaller tables inside the big table lets you expand or adjust your content without causing a lot of problems. But remember that you will have space BETWEEN the inner table and the outer table. Use it to hold more text or image because you can not get rid of it.
My home page is CENTERED. (Highlight all tables at one time and click CENTERED on the toolbar).
The tables are set to PIXEL settings. The size of the table will not change even when the size of the window does.
TIP: Don't turn off your table borders. They show in FireFox and other browsers. Make them invisible!
Right click Table choose Properties > Table
Hide the table borders using the dotted lines.
By the way. Do not overload your pages! My home page has too many animations, too long, too many links, too many images, takes too long to load. DO NOT do that on your site!
Experiment and have fun!
Some other examples of this TABLE layout:
(TPACC was using CSB when this image was made. The site now uses other software.
This one uses a BACKGROUND picture BEHIND A VERY LARGE TABLE.
There is no TOP or LEFT border turned on in CSB.
That is just a PICTURE that LOOKS like borders with an invisible table over it!