Table-less Layout
Can It Be Done?
Laying out a page without tables requires very careful markup of your elements,
using <div> tags to group information.
These blocks encapsulated by <div> tags are frequently called "layers".
Layers can be aligned either sequentially (vertically),
or horizontally using a float attribute on the style assigned to the <div> group.
Most browsers are somewhat quirky about floating elements. The only way to consistently align layers is to set their absolute sizes in pixels, and position them with respect to the upper-left corner position of the browser window.
The IRISM's WebZine site uses tables for layout. Tables behave consistently across most browsers most of the time, and have the benefit of sizing to the height of the cell with the longest contents. As can be seen on this page, the left and right sidebars have short (left), or missing (right) contents. The browser fills the entire sidebar cells with the background color all the way to the bottom of the entire table. This is excellent for design.
Limitations
However, when using layers, instead of table cells, to mimic the same effect, the browser will render the layer to the size of its contents, even if the content length is shorter than that of the contents in the largest layer. The only way to get around this when using layers is to clearly specify the height of the element. Unfortunately, this does not keep the design "liquid" (scalable).
View the following pages in your browser:
- Table-less Version of an IRISM's WebZine Page
- Table-less Fixed-Width Version of an IRISM's WebZine Page
You will be able to compare how the browsers render the information.