What is the easiest way to convert table tags into standard css?

Question

I tried to do this manually, but it's prone to error. Is there an easier way to automatically convert it?

Answer 1

Perhaps the problem lies in the idea of "converting" tables to CSS. Rethink your HTML layout from the bottom up and code it from scratch.

Answer 2

Well-written (X)HTML should be semantically sound. What that means is that the tags you use should match the content that they contain.

For example, an ordered list of elements should be contained within an <ol> tag, a paragraph of text in a <p> tag, and a heading inside a <h#> tag.

The tags used for grouping and layout in semantic (X)HTML are the <span> and <div> tags.

Since the distinction of which tags to use where is a semantic distinction, there isn't an easy way to "automate" this. My recommendation is to pick up a book on semantic (X)HTML(I highly recommend Dan Cederholm's Bulletproof Web Design -- it's canonical in the field) and rewrite your code from the ground up.

It should not be difficult.

Answer 3

I think it would be difficult indeed to automate this. I can imagine that some tool somewhere will try to do this for you, and presumably what it would do would be to wrap each hunk of content in a div tag and then position each one absolutely so that it matches where that content was located in the original page. DO NOT DO THIS.

Start afresh. Separate your content into containers that make sense semantically. Then position them as simply as possible. A simple grid-based layout can often be achieved simply by using "float:left" to place divs next to each other and using "clear" when appropriate.

Answer 4

Step 1. Think hard about why (and whether) you want to do this.

Step 2. Start from scratch and rebuild what you have, or go with a design that actually lends itself to css styling.

Step 3. See Step 1 when the inevitable flow and layout problems arise across different browser definitions.