Convert layout based table to div / css based
I have to rewrite the UI for a fairly large web application. The thing is, the layout is completely table based, and if I could somehow semi-automatically convert the tables to divs it would have saved me a huge amount of time.
What are the best practices when doing something like this? Is this a good idea?
The application uses layout files (containing something similar to helpers) that are parsed into html at runtime, and the application itself also outputs the html in specific places. So the job would be to transform these helpers and the htmloutput code in the application.
a source to share
The biggest benefit of avoiding tables is to use semantic markup in HTML and use CSS for layout, thus separating content from presentation.
If it is an HTML-generating application, this probably cannot be achieved, and there will be little or no benefit to placating "tables considered malicious".
I certainly don't see the benefit of simply replacing <table> with <div class = "table"> etc. This is a complete misunderstanding of the benefits that can result from avoiding tables for layout.
a source to share
use CSS based table layout:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
do a string replacement by flipping everything and, accordingly,
add a style definition like this:
div.table { display:table; }
div.tr { display:table-row; }
div.td { display:table-cell; }
this way everything should look like a table layout without actually being one
Big disadvantage: if you used rowspan and colspan you are out of luck, there is no such mechanism in CSS
a source to share