Tables vs. CSS Positioning
Table Based Template Designs:
First, remember that there is nothing evil or bad about tables! A properly
designed table-based layout will validate, have clean html coding, etc.
All table-based templates have very strict parameters. Some of our FrontPage web templates are designed using "fixed width" table cells designed to remain centered on the viewer's screen. While these pages will view well at a resolution of 800x600, they will also be displayed equally well at resolutions 1024x768 and higher.
If you drag or move any table borders (the dotted lines you see in Design/Normal view), the table or cell will be "resized" incorrectly and will become reset to a new fixed size rather than the pre-designed width. As you edit your pages and move or drag a border, immediately click on the "undo" icon/button and then attempt your changes again.
We suggest that you do not directly add columns to any existing page layout. Instead, delete the template content. Next go to Table > Insert > Table to add your own table in the main body area. You may reformat this new table by adding rows and columns as needed.
It is also important to remember that if you add an image that is larger than the containing area, that cell will expand to hold the element you have added. This will distort the entire table and your page will not view as intended. In other words, if the sidebar area is 200 pixels wide and you insert an image that is 250 pixels wide, the sidebar area will expand to hold the image and your page will not view correctly.
CSS Positioned Template Designs
Over the past few years, there has been a push away from table-based designs to those that use CSS to position DIV elements on the page.
Most of our CSS positioned templates consists of only a few simple areas. Rather than use a table <table> with the customary rows <tr> and columns <td>, we divide the page by using Divisions <DIV>. Each DIV’s appearance and position is controlled entirely through the external style.css file.
Rather than use a table to hold our text and images, we have used a class or ID called "wrapper." This forms the shell or containment “box” in which all of the other page elements are placed. We recommend that you not edit these parameters.
The remaining DIV areas are explained within the template. It is, however, important to remember that each DIV its parameters for width, height, etc. defined within the CSS file. Just as with table based page layouts, inserting an element that is wider than its container will cause the page to distort and not display correctly.