Moving from Tables to CSS

3 steps to CSS heaven

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:

Moving from Tables to CSS based design

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.

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“I have always wished for my computer to be as easy to use as my telephone; my wish has come true because I can no longer figure out how to use my telephone” - Bjarne Stroustrup