DIV Based Layout with CSS

One of the most common page layouts using tables is easy to do with the ALIGN attribute. This is a left-hand navigation bar with a larger content section, directly to the right of it, building only two tables.  

Here is the code:

<table align=”left” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation links are placed here</td>
</tr>
</table>

<table align=”right” width=”80%” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>

We build this simple two-column layout, placing the tables as mentioned above: one is located to the left and the other is located to the right. The ALIGN attribute helps us to turn complex tables into simpler ones.

We can use this technique with nested tables too, to keep our layout easier to maintain and display, while it’s still quite appealing to search engines spiders.

A note about this: the attributes ALIGN, WIDTH and HEIGHT are deprecated elements in HTML 4.01 (they are marked for deletion in future versions), but they aren’t likely to disappear any time soon. Currently, all browsers recognize these attributes.

From this point on, we could attach an external style sheet that contains all the proper style declarations for each table, continuing to improve the code like this:

<table id=”content” width=”80%” align=”right” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>

<table id=”leftnavigation” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation Links are placed here</td>
</tr>
</table>

The layout is the same as before, but note the ID attribute for each table. Assigning ID contextual selectors from an external style sheet allow us to build the visual appearance for data contained into each table.

So far, this is a simple sample for table-based layout. It can be easily expanded to more complex layouts, adding nested tables techniques and so. However, I would strongly recommend using DIV tags and CSS for page layout, as we shall see in a moment. Trust me.