Tables Versus CSS Positioning

CSS Positioned Template Designs

For quite a few years, there has been a move 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 has its own specific 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.

It is also important to remember that if you add an image that is larger than the containing area, that block will expand to hold the element you have added. Your page will then 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 it will "drop" to an area where it has more room. Yikes!

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. (But there are definite and distinct advantages when tables aren't used for the page layout design.)

All table-based templates have very strict parameters. Some of our older, FrontPage web templates are designed using "fixed width" table cells designed to remain centered on the viewer's screen.

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.