CSS AND Table Website Layout Hybrid Design

CSS AND Table Website Layout Hybrid Design

As most web designers know, there is a debate raging over the use of HTML Tables (ie. table, tr, td, etc.) in the construction of web page layouts.

The main issue is that CSS offers no simple (and supported) solution for the creation of basic, vertically flexible, columns. In fact, it offers no grid structure to work with whatsoever (yet). As an old school designer, I am used to doing full table layouts, but CSS offers some masterful improvements — just not in this area.

So my short term solution has been to use a table superstructure to establish the layout grid, and use CSS for everything else.

The screenshot above is an example of a site layout containing just one table. The red lines show the table-based superstructure of the page. This solves the column issue without bogging down the code too much, and it requires no CSS “hacks” to create the layout.

A more conservative use of tables might make sense, like the New York Times website:

NY Times Website - Sparring Use of Tables in Layout

NY Times Website - Sparring Use of Tables in Layout

One thing is certain, however, 100% table-based layouts are out. Oddly google is a bit behind (see below). I am sure they have their reasons though.

Google News - Odd Overuse of Tables in Layout

Google News - Odd Overuse of Tables in Layout