Redesign tables to CSS

[JillC]

I'm trying to redesign a tables-based website to a CSS layout. I've got the basic layout all sorted out - a 3 column style with floated left and right columns. The problem is on the old website, it used lots of tables for the display. So I keep coming across sections like this which needs to go inside the middle content div:

4-col table fixed width 640px, 2nd & 3rd col fixed width for images.
Next line is,
2 col table fixed width 400px, 2nd col has image.
Next line is,
2 col table fixed width 500px, 1st row col 1 image 200px wide, col 2 text,
2nd row col 1 text, col 2 is image 357px wide.

I can convert these to tables with CSS styles instead of inline styles but I don't know if that is the right approach? Should these be a series of divs? or what?

I'm having awful trouble figuring out how to set up these sections - just can't get my head around it at all.

 

[dwarfthrower]

Using classes defined in your stylesheet is better than using inline styles. If you need to change the style across 150 pages, it's a lot easier to modify 1 css file than 150 html files.

As for the tags themselves, you could apply a style directly to the images themselves to float them left or right, as for the text blocks - you could use div, p, or span as the situation calls for. Remembering that div and p are block elements (they render as a separate block) and span is an inline element.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps

 

[Vragabond]

The problem, I think, is that you are still within a table state of mind. From your description it is hard to say what the best approach is, but it might be that it would be better if you would show us the layout rather than give your tabled description of it. Because most of us will probably see different blocks to the tables and cells you described.

 

[JillC]

hmm, sorry, guess I should've realised it was too hard to describe. The original website (not my design) is

http://www.worldliteracy.com.au

- I've got the red and blue boxes more or less sorted, it's the section down the page a bit starting with " After a while guessing and memory fail..."

My draft version

http://www.worldliteracy.com.au/intro.html

Thanks.