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>