Creating proper layouts (table-like) with CSS

Question

How do I properly create layouts with CSS?

I.e. how do I do presentation if I were to replace the html tables I had used earlier?

With <tables> I had all the sections and different regions aligned and properly shown (at least to my perspective). If one of the cell values is a column was to increase it would dynamically increase the size of the column and the data in the next column would be pushed to accommodate the increase.
All these things were convenient with tables and as a developer I never really thought about it, until I decided to do away with tables.

Question is, we need to do layouts much like the way we present tabular data in tables. Neatly aligned and sort of tabular-like (I don’t know, I missing a lot of key verbs and adjectives to express my intent. But you get the point I suppose). How do I achieve this with pure CSS?

Can you point to an ideal example or state the properties I should be looking at?

Edit: I am not trying to display tabular data. I just feel the presentation is somewhat tabular like (say like the yahoo homepage)

Answer 1

Tables are not always evil. If your data looks tabular, use a table!

Answer 2

Well, if you're presenting tabular data, then you should use a table - it's what it's designed for.

Answer 3

I don't think you should.

"Tables are for tabular data."

So please use tables!

But here is a possible solution if you don't want this advice:

http://www.dev-archive.net/articles/table-in-css.html

Answer 4

You may consider using a CSS framework, like the well documented and useful Blueprint.

Answer 5

Well actually most developers are now using DIV styled pages and you can find different layouts here : Create Your Custom Layout.

1. Div is more flexible and consume less time to be loaded on clients computer
2. Most browser support DIV
3. etc.

Here is a nice article : Throwing tables out the window

Answer 6

Take a look at the Blueprint CSS framework, it quickly enables you to layout your data in columns and cells, so table like structures. The great advantage if the Blueprint CSS framework is that it is easy to implement and it works crossbrowser.

http://www.blueprintcss.org/