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

In some cases, using regular expressions could speed up your process.

For instance, something like this:

<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>

would match the start of a table and provide the contents of the first cell in $1 for a replace:

<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div>

Of course you'd need to customize to match your particular use case. If you have a number of similar pages, you might try hand coding one first and then using something like this to make converting the others simpler.

Another approach would be to use something like this jQuery plugin: https://github.com/ryandoom/jquery-plugin-table-to-div

It is intended to modify following rendering, but could be used during development to take a given table and provide a simple DIV based form of it.

Answer 2

I wouldn't use a framework. Learning a new framework is only useful if you use it over & over again. Each framework has its own bugs and weaknesses. Use

display: table-cell;

to make a column. These will line up like float: left;. See http://quirksmode.org/css/css2/display.html

Answer 3

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

Answer 4

I second the commenters who say you should re-design the whole thing from scratch. Clean up the HTML and then make the CSS.

I'd like to add a reason to do so. Usually table-based designs are at least a few years old and therefore look quite passe. Take advantage of this opportunity to improve the design. Either a slight refresh or a complete overhaul depending on your taste and needs.

Answer 5

I don't know is this can be of any help, I build CSS Framework called Emastic (supports fluid and fixed columns) and you can simulate tables if you want here is the example Emastic Table

Answer 6

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 7

Iterative way works as well. Start with small blocks, converting them to CSS. This should simplify your table structure, hopefully leaving only the "basic grid" in tables and all the rest in CSS.

From there, pick an existing, tested solution if it's a simple layout (for 1 to 3 columns, there are tons of tested solutions out there). If it's more complex, go with Blueprint.

Answer 8

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.