Converting table based layout into a div/css based one.

Question

I'm supposed to rewrite the UI for a rather large web application. The thing is that the layout is completely based on tables and if I could somehow, semi automatically, convert the tables into divs it would save me a huge amount of time.

What are the best practices when doing something like this? Is this a good idea at all?

The application use layout files (containing something similar to helpers) that are parsed into html at runtime and the application itself also output html at specific places. So the work will consist of converting these helpers and the htmloutput code within the application.

Answer 1

use a CSS based table layout:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

do a string replace, turning every , and into , respectively

add a style definition like this:

div.table { display:table; }
div.tr    { display:table-row; }
div.td    { display:table-cell; }

that way, everything should look like a table layout without actually being one

The big drawback: if you used rowspan and colspan, you're out of luck, there are no such mechanisms in CSS

Answer 2

The greatest benefit of avoiding tables is to use semantic markup in the HTML, and use CSS to do the layout, thus separating content from presentation.

If it is the application generating the HTML, this probably can't be achieved, and there would be little or no benefit beyond appeasing the 'tables considered harmful' style police.

I can certainly see no benefit in simply replacing <table> with <div class="table"> etc. This is a complete misunderstanding of the benefits which can come from avoiding tables for layout.