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 "
<table id="layout" summary="">
<tr id="row1"><td id="banner" colspan="3">
<tr id="row2"><td id="leftbar">
<tr id="row3"><td id="footer" colspan="3">