Menu
Given an HTML page that has a complex table-based layout and many tags that are duplicated and wasteful, e.g.:
td align="left" class="tableformat" width="65%" style="border-bottom:1px solid #ff9600; border-right:1px solid #ff9600; background-color:#FDD69E" nowrap etc.
Are there tools to aide the task of refactoring the page into a more compact form? For instance, a tool that automatically generates CSS styles and selectors? That converts tables into div layouts?
Just to give a sense of the order of the problem, the page I'm looking at is >8000 lines of HTML and JavaScript, which is 500Kb not counting images!
Update: In re. "give up and start from scratch" comments. What does that mean, in the real world? Print out the page, scan it, set it as the background image in Dreamweaver, and start with that? Seriously? Would that really be more efficient than refactoring?
Update: I'm not denigrating "trace it from scratch" nor did I mean to imply that Dreamweaver is by any means my tool of choice. I'm just very surprised that refactoring a layout is considered to be an intractable problem.
448
I agree with TimB in that automated tools are going to have trouble doing this, in particular making the relational jumps to combine and abstract CSS in the most efficient way.
If you are presenting tabular data, it may be reasonable to attempt to refactor the inline CSS to reusable classes.
If you have a lot of similar tables with inline styles you can gradually refactor the CSS by simple search and replace. This will give you lots of classes that match a subset of similar tables and lots of somewhat similar classes. Breaking this up into layout and presentation would be a good start, then overriding these with specific classes for each theme or semantically related item.
I would still recommend starting from scratch, it's probably going to be quicker, and you can recreate only what you need to present the page, and can reuse elements or collections of elements at a later date.
The time spent will also pay off significantly if the page is ever needed to be modified again.
But that's not at all likely is it? :D
134
I'm not aware of specific tools, only the generic ones of caffeine and Firebug, which anyone doing CSS work should be aware of.
I think that the problem is sufficiently hard that automated tools would struggle to produce good, maintainable markup and CSS.
38
It seems as if you are looking for more automated means of re-factoring an old table-based layout to CSS standards. However, I agree with some of the other comments to "start from scratch".
What this means to you is that you should try to rebuild (using CSS) the look that was achieved using an HTML table. If this concept escapes you, then I would suggest Googling for some beginner CSS tutorials, maybe even some focusing on teaching the concept of Table->CSS layouts..
Another tool to consider (that could possibly aid you even further) would be some sort of CSS "framework". I recommend Blueprint CSS for this, as it helps in the creation of grid/table-like layouts with minimal effort. Another good one is Yet-Another-Multicolumn-Layout, which has a really neat multi-column layout builder.
38
Don't just throw it in dreamweaver or whatever tool of choice and slice it up. Write the HTML first, in purely semantic style. eg, a very common layout would end up being:
<body>
<div id="header">
<img id="logo"/>
<h1 id="title">
My Site
</h1>
<div id="subtitle">Playing with css</div>
</div>
<div id="content">
<h2>Page 1</h2>
<p>Blah blah blah..</p>
</div>
<div id="menu">
<ul>
<li><a>Some link</a></li>
...
</ul>
</div>
</body>
Do the HTML in a way that makes sense with your content. It should be usable if you have no CSS at all. After that, add in the CSS to make it look the way you want. With the state of browsers/CSS now, you still probably have to add some decorators to the HTML - eg, wrap some things in extra divs, just to be able to get the content the way you want.
Once you're done though, you'll have a very flexible layout that can be modified easily with CSS, and you'll have a page that is accessible, to both disabled people and search engines.
It does take quite a bit of learning before you get the knack of it, but it is worthwhile. Resist the temptation to give up and go back to table based layouts, and just work your way through. Everything can be done with semantic HTML and CSS.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
