Tableless Design using CSS

lenora

I am trying to change a website thats designed with tables into a tableless one using CSS but dont really know about it I have googled it and seem to get a whole range of results back most just advocating the benefits of tableless designs can anyone recommend a good guide preferably something that shows what I need to do to both the code and the style sheet

GreenNotM

this gives css and html http://alistapart.com/articles/practicalcss

This is 3 columm tableless howto http://www.w3.org/2002/03/csslayout-howto with code
HTH

martindow

Here's another useful resource
http://www.css-discuss.org/
there is a useful foriunm and lots of links to other sites.
Never tried tableless design myself but reading the posts on here you do seem to need to use some hacks as IE in particular does not render CSS positioning properly.

colin79666

I redesigned by site to use CSS for layout a few months ago.
You can view the CSS for it here: http://www.free-mobile.net/css/site.css

Best of all it works in Internet Explorer 6 without any hacks!

Wombat

Have a look here also:

http://jeffhowden.com/code/css/forms/

Examples of tableless form design including (I think) every type of form input etc.

martindow

Another interesting site
http://www.csszengarden.com/
By clicking on links you select different style sheets and see the page change radically.

newfoundglory

I have done some layout using CSS in my job. Most of this centers around using div tags in replacement of tables, and then applying styles with use of the "float" property. You specify the size and properties of the div tag and then use "float: left" to stack div tags up against each other horizontally. "float: clear" is also useful.

Most websites use a "container" div tag, that is a div tag which contains everything else and is of a fixed size. You can then place div tags inside this container and line them up using float.

lenora

Just wanted to thank everyone for the help I have it all very useful