breadcrumb > breadcrumb >

Tables plus CSS

Don't throw out your old tables - not just yet. This web design uses tables for structure and CSS for formatting. The promise of CSS was that it would offer something approaching simplicity to the challenges of web design, making it more like word processing.

CSS 1 (the first version of CSS in 1996) states its intention thus: CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.

Maybe so, but it's not so simple. After abandoning tables as the main means of web page layout, you have to embrace the <div> plus CSS. CSS is certainly vastly more powerful and sophisticated than ye old HTML, but the use of the <div> tag to layout a web page can involve every bit as much intricacy and ingenuity as nested tables.

This page is an example of how the HTML table tag is used to layout the page and CSS is used to format it.

If you use the layout feature in a WYSIWYG editor, such as Dreamweaver, then it's even easier.

The left navigation bar is a nested table, and the quirky dancing effect you see when you hover over the links is achieved by putting an extra padding value in the CSS for the a:hover tag for the navigation bar:

#menuNav a:hover {
background-color: #DDBBBB;
display: block;
color: #B3064B;
padding: 3px;
text-transform: capitalize;
font-weight: bold;

Because tables are flexible and expand to allow their contents to fit, the hover tag forces the table to momentarily expand.