ansaurus

Question

Tools for refactoring table-based HTML layouts to CSS?

Answer 1

+2 A:

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.

TimB 2008-09-30 01:57:30

I agree, automated tools would require so much massaging of the data as to be a complete waste of time.

garrow 2008-09-30 02:50:16

Answer 2

A:

You denigrate this approach in your question, but I'd recommend taking a screen shot of your page in the browser whose rendering you like the best, declare that to be your reference, and start trying to recreate it. It's easier than you think. I've had to take skanky old table-based layouts and turn them into CMS templates done with modern techniques and it's not that bad a job.

Jeremy DeGroot 2008-09-30 02:06:25

Answer 3

+2 A:

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.

leek 2008-09-30 02:15:24

Answer 4

A:

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.

gregmac 2008-09-30 02:31:02

Why so many divs?Why not <ul id="menu">?I'd also consider putting the subtitle in an h2, or even a span inside of the h1, depending. the less "semantically null" tags the better.

Jonathan Arkell 2008-09-30 03:15:34

Answer 5

+2 A:

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

garrow 2008-09-30 02:49:04

Answer 6

A:

I am tackling a similar problem at the moment, not quite as messy as what this sounds, but the product of really bad asp.net web forms, overblown view state, and deeply nested server controls that format search results from a database. Resulting in ~300 - 400K of markup for 50 DB rows - yeek.

I have not found any automated tools that will do a half way reasonable job of refactoring it.

Starting with a tool like visual studio that you can use to reformat the code to a consistent manner helps. You can then use combinations of regexs and rectangular selecting to start weeding out the junk, and stripping back the redundant markup, to start to sort out what is important and what is not, and then start defining, by hand, an efficient pattern to present the information.

The trick is to break into manageable chunks, and build it up from there.

If you have a lot of actual "tabular data" to format, and is only a once off, I have found excel to be my saviour on a few occasions, paste the data into a sheet, and then use a combination of concatenate and fill to generate the markup for the tabular data.

seanb 2008-09-30 03:13:25

Answer 7

A:

Starting from scratch means going back to the design drawing board. If you need to refactor such a monstrosity, then for all the time you will spend making it better, you might as well have done a full redesign.

If you want to get away from duplicated and wasteful tags, you need to escape Dreamewaver. A good text editor (jedit, emacs, vim, eclipse, etc.) is really all you need. If you customize your editor properly, you won't even miss Dreamweaver. (Emacs with nXhtml and yasnippets is my favorite.)

Jonathan Arkell 2008-09-30 03:13:38

ansaurus

tags:

views:

answers:

Tools for refactoring table-based HTML layouts to CSS?

related questions