View Full Version : Tables2CSS

04-29-2006, 04:01 AM
Hello everyone:

Just got a new script (javascript) up and running. Basically, what it does, in a rather primitive fashion, is that it takes the html code for a table-oriented layout and converts it to a CSS layout. I've done my best to ensure that it handles nested tables by generating appropriately, relatively positioned divs.

The site is located here (http://utilities.neeldhara.com/tables2css/). (Admittedly I'm not too much of a designer - but to my credit the layout is pure CSS :D)

I would really, really appreciate suggestions to improve the workings of the script. The script currently has little or no commenting; but I'll be quite happy to answer specific questions. The script is still beta, so I would really look forward to people pitching in with ideas to improve it.

I hope this has the potential to become a useful utility. As an aside, I must mention that when I wrote it, I thought it'd be mainly targeted at novice HTML-ers, who stick to table-oriented designs simply because they believe that CSS is tougher. Some automation in the Tables-to-CSS journey, I hope, will help them get started. However, now I'm wondering if this can be a time-saver for experienced designers who're stuck with table-layouts from old times.

Simple tabular layouts are converted, as far as I am aware, into their CSS counterparts, quite flawlessly with the script. If anyone cares for a test case, please drop a line here stating as much, and I'll demonstrate.

Oh, and I used many nifty scripts from DD while constructing the website (thanks to everyone who makes them freely available!) and DD is also on the list of resources (http://utilities.neeldhara.com/tables2css/resources.html) under JavaScript (although, me still wondering if it fits in better as a general resource).

Looking forward to some inputs here... Cheerio!

04-29-2006, 11:39 AM
Took me a few minutes to find the link to the actual script -- white links on a default background?

04-29-2006, 11:47 AM
<link href=;/style-using-div style = "position:relative; top: 0px; left: 0px;s.css; type=;text/css; rel=;stylesheet;">
<script type=;text/javascript; src=;/script.js;"></script>
<div style = "position:relative; top: 0px; left: 0px; class=;whole; cellspacing=;0; cellpadding=;0;">