What's the best way to convert table layout to CSS layout?

Question

I'm about to begin working on a web page with a complex table-based layout (coded years ago).

One of the things I'd like to do is convert the layout to a proper CSS layout with divs and spans.

Can you suggest a good approach for tackling problems like this? Should I use a CSS framework like Blueprint? Just get in there and hack on it until it looks right? I already make heavy use of Firebug and the IE Developer Toolbar.

Answer 1

There generally isn't a silver bullet in converting between table and CSS. Every site is different and has different requirements. The only real answer is: simply start the markup from scratch.

The best advice is to write the markup entirely first. Make sure the markup is accurate, semantic, and represents your data entirely. Do not write the stylesheet... yet. After the markup is done, create the CSS. This way you have semantic markup and CSS is purely controlling the presentation.

CSS frameworks often don't advocate this approach to semantic markup because they force you to add additional tags to comply with their approach. Consequently, CSS frameworks are sometimes more trouble than its worth.

Do the markup, then the CSS.

Answer 2

Before you start, ensure you are using a CSS reset. Eric Meyer and Yahoo YUI are both excellent. This will help to make all your browsers look the same.

Also, install the HTML validator too. This will ensure your HTML is looking good and ready for adding the CSS.

Then grab a copy of Firebug and install it in firefox. This is excellent for seeing which CSS rules are doing what. You can disable individual rules by clicking s cross by each rule.

Now, visit some web pages which validate correctly and see what rules they have used in their style sheets.

Web sites to try are www.alistapart.com, CSS Zen Garden, SimpleBits etc.

Answer 3

The converting process will be a painful headache! I suggest you to start a whole redesign.