This page uses columns, but it does not have tables. This is a two-column page with a variable-width header, variable-width content, and a fixed-width menu bar (the menu items are placeholders and don't lead anywhere.) You can resize the page and the columns will resize as well.
There are three ways to create columns in HTML: with frames (this is rarely done anymore,) with tables (practically all large sites are done this way,) and now with CSS. This page is an example of a no-tables site. The content is in the HTML and the layout, both fonts and cells, is defined in the CSS. For the demonstration, the cells are colored and outlined. You can create a page without the colors or lines.
A small group of CSS purists are promoting this style of webdesign. From bluerobot.com, I copied the sample HTML and CSS, simplified it, and added extensive line-by-line documentation within the CSS file to explain how it works. These files are at my site andreas.com/faq-csstwocols.html You may copy them, distribute them, and use them.
Why do a web page this way? There are advantages and disadvantages.
Advantages: It's an idealized version of what HTML/CSS should be: the complete separation of content and layout into two files. The content goes in the HTML file and the layout is controlled by the CSS file. If CSS lets you modify the font for a 2,000-page website by changing a single line, then CSS also lets you modify the column layout for that large site by editing the CSS file.
In addition, this page prints very nicely.
Counter-argument: It's easy to modify the table layout for a huge site if you use the right tools. Allaire Homesite (an HTML editing environment) lets you do global search and replace. If you write consistent HTML, you can modify every page in one step. That's how I maintain large sites; it works; and it's easy to do.
Disadvantages: Purist no-tables CSS is tedious to design. Each cell has four parameters: distance from the top of the browser, from the bottom, from right, and from left. You must specify each one by the number of pixels. If you have three cells, then if you modify one, you must modify the other three. All of this has to be done manually. I doubt DreamWeaver or any of the layout tools can deal with this kind of layout.
In a large site, not every page is identical. Often, one uses tables-within-tables to do layout. It would be extremely difficult to do that with no-tables CSS. For example, my faq-pda.html page has a table within a table in order to create three columns. This could possibly be done with CSS, but it defeats the idea of outsourcing the layout into the CSS and removing localized layout from the HTML file. On most corporate sites, there are tables within tables within tables, and so on.
A minor problem is extreme resizing. If you resize the browser to perhaps an inch or two, the layout becomes messy. That doesn't happen with a tables site. Of course, no one is going to use two-inch browsers. I wonder whether this would work on a PDA. Perhaps you might be the first person to make a no-tables page for a PDA.
So... no-tables CSS is an interesting experiment of what CSS can be. Go ahead, fetch the HTML and CSS files, and design a few pages with this.
Return to andreas.com.