"Stacked Tables" Demonstration

  Why bother with stacking tables? The page won't actually load any faster, but it seems like it for your visitors... because the top table and it's content will load (and display on the screen) first, then the second, then the third, etc.

  This is useful if you have a lot of content that you want to keep on one page, but still wanted to reduce the number of surfers who leave after twenty seconds, because they are too impatient to wait for everything to load.

  It's also useful if you insist on putting background music on your page, just place the code for it in the last table. Everything above it will load first and your visitor will have something to look at while the music loads.

  The table below looks like one table with three columns... but it's actually three stacked tables. The code for it is in the text box following.

Left column content

center column content

right column content

Left column content

center column content

right column content

Left column content

center column content

right column content

<!-- Top Table (Header area)--> <table cellpadding="0" cellspacing="0" width="90%" align="center"> <tr> <td bgcolor="#ff0000" width="25%"> <p>  Left column content <br /><br /><br /></p> </td> <td bgcolor="#ffff00" width="50%"> <p>  center column content <br /><br /><br /></p> </td> <td bgcolor="#80FF00" width="25%"> <p>  right column content <br /><br /><br /></p> </td> </tr> </table> <!-- second table (Main body area) --> <table cellpadding="0" cellspacing="0" width="90%" align="center"> <tr> <td bgcolor="#ff0000" width="25%"> <p>  Left column content <br /><br /><br /></p> </td> <td bgcolor="#ffff00" width="50%"> <p>  center column content <br /><br /><br /></p> </td> <td bgcolor="#80FF00" width="25%"> <p>  right column content <br /><br /><br /></p> </td> </tr> </table> <!-- third Table (main body continued/footer area) --> <table cellpadding="0" cellspacing="0" width="90%" align="center"> <tr> <td bgcolor="#ff0000" width="25%"> <p>  Left column content <br /> <br /> <br /></p> </td> <td bgcolor="#ffff00" width="50%"> <p>  center column content <br /> <br /> <br /> </p> </td> <td bgcolor="#80FF00" width="25%"> <p>  right column content <br /> <br /> <br /> </p> </td> </tr> </table>

 

  Just for demonstration, this is the same table with a border around the left and right columns. It's done with a "style" span command in the table cell (<td>). Each table uses a slightly different span command, the code for it is in the text box following.

  It's still three tables stacked, but the border makes it look like it's just one table. (if you used the standard table command of border="2" it would be obvious that it was three separate tables.)

Left column content

center column content

right column content

Left column content

center column content

right column content

Left column content

center column content

right column content

<!-- Top Table (Header area)--> <table cellpadding="0" cellspacing="0" width="90%" align="center"> <tr> <td bgcolor="#ff0000" width="25%" style="border-top:blue solid 2px; border-left:blue solid 2px; border-right:blue solid 2px;"> <p>  Left column content <br /><br /><br /></p> </td> <td bgcolor="#ffff00" width="50%"> <p>  center column content <br /><br /><br /></p> </td> <td bgcolor="#80ff00" width="25%" style="border-top:red solid 2px; border-left:red solid 2px; border-right:red solid 2px;"> <p>  right column content <br /><br /><br /></p> </td> </tr> </table> <!-- second table (Main body area) --> <table cellpadding="0" cellspacing="0" width="90%" align="center"> <tr> <td bgcolor="#ff0000" width="25%" style="border-left:blue solid 2px; border-right:blue solid 2px;"> <p>  Left column content <br /><br /><br /></p> </td> <td bgcolor="#ffff00" width="50%"> <p>  center column content <br /><br /><br /></p> </td> <td bgcolor="#80ff00" width="25%" style="border-left:red solid 2px; border-right:red solid 2px;"> <p>  right column content <br /><br /><br /></p> </td> </tr> </table> <!-- third Table (main body continued/footer area) --> <table cellpadding="0" cellspacing="0" width="90%" align="center"> <tr> <td bgcolor="#ff0000" width="25%" style="border-bottom:blue solid 2px; border-left:blue solid 2px; border-right:blue solid 2px;"> <p>  Left column content <br /><br /><br /></p> </td> <td bgcolor="#ffff00" width="50%"> <p>  center column content <br /><br /><br /></p> </td> <td bgcolor="#80ff00" width="25%" style="border-bottom:red solid 2px; border-left:red solid 2px; border-right:red solid 2px;"> <p>  right column content <br /><br /><br /></p> </td> </tr> </table>

  The important thing to remember when you are building a page with stacked tables is to code the table "cellspacing" element at zero.
<table cellpadding="0" cellspacing="0" width="90%" align="center">

If you want to make it 100 percent wide on the surfer's screen you need to tell the browser to give the page a margin (padding) of zero as well, either in the CSS or on the page <body> tag.

  I hope that makes it all easier to visualize.