I thought I'd share some ideas on moving from tables based layouts to pure CSS based ones.

If you're here it probably means you already understand the benefits of pure CSS layout: faster download times, improved accessibility and search engine optimisation for example. There are already lots of tutorials on CSS based design, but what most of these articles don't tackle is developing a practical learning process of moving carefully from tables to CSS design.

In this article I'm not going to concentrate on CSS code directly, instead I'm going to show a stepped approach to moving existing sites from tables to CSS, and for starting to include more CSS based design into your workflow.

Why? Because I still think many people find learning to build CSS layout sites from scratch difficult. There's a steep learning curve associated with CSS design, much more so than tables, and getting consistent results across different browsers is tricky, even for the more experienced.

Developing a strategy that allows you to gradually introduce more CSS based design into your development process can ease the frustration, while still allowing you to progress towards better design practices.

Lets take a look at the stages in the process:

You might want to tackle each of these stages by redesigning an existing tables based site in a number of steps, or you might want to try them out over a succession of new websites.