Page Layout

Most web site templates perform page layout by using a few blocks of content, for instance a header, a left column with the navigation, a right column with the main content, and a footer, as shown below:

Any attempt to code this page must start by roughly positioning these four blocks of content. Style details can wait; first you should make sure that the content blocks are aligned correctly in all browsers on all resolutions. There are two ways to do this: pure CSS and minimal tables. Although pure CSS is the best choice overall, it has its problems.

Pure CSS

Generally speaking it’s difficult to obtain proper horizontal alignment in CSS. Horizontal alignment wholly depends on the float declaration, which, though supported by all modern browsers, is supported according to two different models, with minor variations even between browsers that support the same model.

These problems aren’t unsolvable; coding a simple four-block layout with the float declaration is quite possible. Nonetheless the danger of insolvable browser incompatibilities increases exponentially with every floating block you add.

Another common problem with CSS is ensuring a proper page footer. On long pages that use more space than the window height, the footer should appear directly below the navigation and content blocks. That’s very easy to code. On short pages, though those that span only part of the window height, the footer should nonetheless appear at the bottom of the viewport, and that’s a far trickier code challenge:

Ensuring that the footer works properly on both long and short pages is a common cause of CSS headache. You can repair this with the following code for your footer code (I am assuming your footer is made up of an ID element named “footer”:

#footer {
     clear: both;
}

Tables

Tables neatly solve these two problems. Correct horizontal alignment has been the most important advantage of tables ever since Mosaic. Giving the table a height: 100% and the cell containing the footer a vertical-align: bottom makes the footer reliable in all circumstances.

If the visual design of your web site requires complex horizontal alignment or a reliable page footer, minimal tables could help you evade complex browser incompatibilities.

Don’t start using those tables right away, though. First try to create a cross-browser pure CSS page, and don’t be shy to ask for help from css-discuss.org. Even if your CSS experiment turns out not to work, you will have acquired valuable experience.

Using pure CSS in all circumstances will have to wait until all browsers support CSS fully. If you’ve honestly tried to use CSS but encountered serious browser incompatibilities in the rough positioning of the content blocks, you should switch to minimal tables.

CSS with Minimal Tables

In the bad old days web developers placed all page elements in tables, and if the page didn’t look as expected it needed yet more tables inside the already existing tables. This process was repeated until the page worked. The underlying theory seemed to be “If we squeeze enough HTML into the page it’ll work eventually. It made for eternal download times and nonsensical markup that was impossible to update.

Fortunately this coding style is on the way out. Nonetheless, as we’ve seen, tables still offer a few advantages over pure CSS. Minimal tables are the perfect compromise. They allow you to use the advantages of both without bloating your code (much).

Minimal table use means: use as little tables as possible. To obtain our simple four-block layout, the following code is all you need:

<table border="0" width="500" align="center">
<tr>
<td colspan="2">Header</td>
</tr>
<tr>
<td>Navigation</td>
<td>Content</td>
</tr>
<tr>
<td colspan="2">Footer</td>
</tr>
</table>

Resulting Table:

This minimal table does a fine job of roughly positioning the four content blocks. You have created a framework that solves some tricky problems for you and gives you free rein to fill in all the other details of your design by CSS.

The table needs many more refinements (a width for the navigation, a vertical-align for the footer) but that’s the job of the CSS, not the XHTML. You don’t need any more tables than this one.

In general you should style the DIVs inside the TDs instead of the TDs themselves. For instance, browsers see a width declaration on a TD as a sort of advice, and they don’t hesitate to overrule it when they think it’s necessary. They will always obey width declarations on DIVs, though.

The only exception is the vertical-align, which must be declared on a TD.

Tables Revisited

As on the page layout page, using one minimal table to roughly lay out your page is quite acceptable. Nonetheless, it is important to stress that this minimal table should be one of only 2 or 3 tables, no more. Do not insert more tables than absolutely necessary. They’re not necessary; CSS can do the job for you.

There’s one exception to this rule: you may use tables to display tabular data, for instance stock quotes or long lists of employees with their room numbers and phone numbers. For these bits of data, you can add an extra table to your code.

If you’re not sure if a certain data set requires a table, ask yourself how you’d display it in print. If you’d use a table even in print, the data is tabular.