Which layout techniques do you use: HTML tables, CSS tables, absolute positioning, floating or some mixture of those?

Question

Although, I know that a lot may depend on a particular web site, what is the mainstream? =) And also, what do you think of implementing CSS table-based layouts while IE6 and 7 are in use?

Answer 1

i personally use a mixture of them all. For grid like data, I favor tables. For advanced layering, I use absolute positioning.

Answer 2

I use CSS floating at the general level, tables for tabular data, and absolute positioning if necessary.

Answer 3

Things are dependent.

I want to put is that you should know what is needed.

One thing Div based layout renders fast than table base. There are some things that might affect your page render time in browse Like use external CSS only etc.

Answer 4

Floating combined with absolute positioning.

I never use tables, perhaps mostly because I got tired of them back when I had to use them because there was no alternatives.

Answer 5

For website layouts I use a mix of CSS layout techniques. Depending on whether I am building a fixed-width site or elastic-width site the CSS techniques differ somewhat.

But, when I want to create any layouts for e-mail marketing then table layouts is the only thing I work with. And now with Outlook 2010 still supporting the Word HTML Renderer I don't think I will be using any CSS layouts for e-mails anytime soon.

As for CSS table layouts, you can use conditional comments to provide a seperate CSS style sheet for IE 6 and 7. Something like this:

<!--[if lt IE 8]
//different style sheet goes here.
-->

I would recommend reading the following two books:

1. Bulletproof Web Design, Dan Cederholm
2. Everything you know about CSS is Wrong, Rachel Andrew & Kevin Yank

The first book will show you CSS layout techniques for both fixed and fluid designs, whereas the second one will provide information about CSS table layout, including how to deal with browsers that don't support it.

Hope this information is helpful.

Answer 6

Tables are not semantically appropriate for making a layout. The "correct" way to do things isn't anything you said in particular.

You should be using semantically-appropriate tags: header tags for titles, div tags for sections, lists for navigation/lists, etc.

Once you have this set up, style the elements in CSS, adding divs, spans, ids, and classes as appropriate. Floats, absolute positioning, etc. should be used as you see fit.