The CSS Patio Garden

The Patio Garden

This experiment was inspired, of course, by the brilliant CSS Zen Garden. Unfortunately, I have neither the visual design talents nor the CSS skills to give that site a run for its money! Think of this as a patio garden, not a zen garden. So these are patio tables.

The aim is to demonstrate that, even when using a table, a massive range of page layout and content styling variation can be achieved by using CSS, instead of HTML tags & attributes, to style the <table> and its contents. Simple layout tables are a sensible tool for an author to keep available. But the emphasis should be on "simple", and CSS should be exploited fully.

The layout chosen is the common 5-box 3-column layout. In each exhibit, the entire <body>...</body> of the HTML document is identical, made by replicating the Unstyled body. All of the HTML (4.01 Strict) and CSS validate at W3C. If other people publish novel & instructive valid (HTML 4.01 Strict & CSS) exhibits, using exactly the same <body>...</body>, I will add links here to their exhibits.

Exhibit Summary Tested with ...
Unstyled This has no styles. As with all of the exhibits below, I've tested this on Windows 2000, using my test browsers: IE 5, IE 6, Firefox 08, Netscape 7.1, Opera 7.23.
Fixed width Fixed-width left-aligned layout. (A boring layout, included just for completeness). W2K: IE 5, IE 6, Firefox 08, Netscape 7.1, Opera 7.23.
Full width Layout expands to use as much of the viewport as needed. (Pretty boring, but shows what tables do when unconstrained). W2K: IE 5, IE 6, Firefox 08, Netscape 7.1, Opera 7.23.
Maximum width Flexible-width centralised layout with a "maximum-width" effect. W2K: IE 5, IE 6, Firefox 08, Netscape 7.1, Opera 7.23.
Swap left & right Fixed-width centralised layout. Leftbar positioned on the right, and Rightbar positioned on the left. W2K: IE 5, IE 6, Firefox 08, Netscape 7.1, Opera 7.23.
Positioning relative to the viewport The Banner, Leftbar, Article, and Footer are positioned in the corners of the viewport. The Rightbar is positioned at the left of the viewport. W2K: IE 5, IE 6, Firefox 08, Netscape 7.1, Opera 7.23. IE 5 & IE 6 use a conditional CSS and absolute positioning.
Horizontal link-bar The links in Leftbar are positioned horizontally below Banner and above Rightbar and Article. Rightbar appears to the left of Article. W2K: IE 5, IE 6, Firefox 08, Netscape 7.1, Opera 7.23.
Absolutely positioned components The links in Leftbar are positioned at the top of the page. Below them are the Banner and Footer. Below those are the Rightbar and Article (in that order). W2K: IE 5, IE 6, Firefox 08, Netscape 7.1, Opera 7.23.
Diagonal table The 3 rows are arranged on a diagonal, each one being offset to the right by an extra 100 pixels compared with the previous one. W2K: IE 5, IE 6, Firefox 08, Netscape 7.1, Opera 7.23.

The Patio Table

This is not the complete body (see Unstyled). It is simply the table mark-up. The filler-content of each of the 5 boxes has been replaced below by "...".

<body>
<table id="layout" summary="">
<tr id="row1"><td id="banner" colspan="3">
...
</td></tr>
<tr id="row2"><td id="leftbar">
...
</td>
<td id="article">
...
</td>
<td id="rightbar">
...
</td></tr>
<tr id="row3"><td id="footer" colspan="3">
...
</td></tr>
</table>
</body>