Welcome to Thinking Outside the Table

Web Pages Shouldn't Use Tables for Layout

CSS Layouts

CSS positioning can be used to create the illussion of table-based layouts. Why not use table?

Tables are slow Tables are inflexible Tables are less accessible to visitors with disabilities Tables don’t degrade well Tables don’t print well

Why use CSS for your layouts?

Valid XHTML

This is the number one reason to use CSS for layout. If you use tables for layout, you are writing invalid XHTML. Tables are only valid in XHTML when displaying tabular data — something created from a spreadsheet or database. It is tabular data and should be displayed in a table. Using CSS to position and layout your pages is the only valid way to get the designs you used to use tables to create.

Editing and Maintainance

Once a page is created with tables, they are usually very difficult to edit and maintain. While CSS positioning has a steep learning curve, once learned, designs based on CSS are easy to maintain. In many cases, it's just a matter of a <div> element surrounding the different sections of your text, and you're done.

Tine & Money

The most common way to create fancy layouts with tables is to "nest" tables. This means that one (or more) table is placed inside another. The more tables that are nested, the longer it will take for the Web browser to render the Web page. Conversely, CSS layouts load faster because there is less code and less to render. This means getting your site to a visitor quicker and with less stress on your host server.

Tables Aren't as Accessible

Just like search engines, most screen readers read Web pages in the order that they are displayed in the HTML. With CSS, you can define a section as belonging on the left side of the page, but place it last in the HTML. Then screen readers and search engines alike will read the important parts (the content) first and the less important parts (navigation) last.

Tables Don't Always Print Well

When you print Web pages designed with tables the right side of the page is usually lost in the print version. And other pages will print sections on various sheets — wasting paper and ink. Conversely, with CSS you can actually create a separate style sheet just for printing, but that's another workshop altogether.

Some CSS Resources
CSShark Answers FAQs

css/edge

websitetips.com CSS section

Guide to Cascading Style Sheets

Style Sheet Reference Guide

CSS School

Cascading Style Sheets (W3.org)

W3C CSS Validation Service.

Agitprop

CSS Pointers Group

Eric Meyer's CSS work

Some More CSS Resources
The Layout Resevoir