Div vs Tables

[Unknown]

I recently saw that many designers are beginning to use the DIV method to layout their templates instead of tables.

Can anyone offer insight to development through either and what the pros/cons are for each, and which do you preffer? Some examples would also be greatly appreciated.

 

[TheBulldog]

ENTIRELY depends on what I am doing.

I like divs because they are cleaner, I LOVE just doing plain css becuase it is ALL the rage and if you are an expert these days at doing a page in all css, you can get 50-100 bucks an hour for design to the right people.

That being said, there are times I still fall back on the old stand bys: tables, and god help me: frames.

I absolutely hate frames, but there are the occasional 5 out of 100 times when you just have to. (god I hate frames)

 

[tsiger]

I stopped using tables about 3 years ago and i must say that it was a wise move. I may take a bit longer to convert a psd template for example to xhtml/css when you first start but you will see the benefits on the long term.

If client asks for additions, changes (move a sibebar from left to right for example) it's just a matter of seconds to do it.
Secondly in more complex project you will notice a huge difference in terms of bandwidth.

The code is cleaner, you can totaly seperate content from presentation.
I am not one of those hardcore believers that say "just throw tables out of the window, move to Strict XHTML" that's impossible. It takes time. But it worths it.

Now i am only using tables for tabular data.

 

[enlytend]

Aside from "tabular data" I can name one other situation where you should use tables - HTML email. Don't even THINK about using div's for email layout !

Do div's produce lighter, cleaner code? Definitely. Is it easier for you to re-arrange things on the page for search engines? Yes, but as long as your code is valid they'll have no trouble reading text in tables and there are tricks for making, for example, data in the 2nd column read earlier in the page than that in the 1st.

For ordinary web pages using div's is the way to go, but IF you use tables, the sky's not gonna fall.

If you have a layout that requires a complex grid (i.e. one that would use a lot of "colspans" and "rowspans" in a table-driven layout), check out the Blueprint CSS Framework.

 

[tsiger]

Good point enlytend. HTML email is a different beast and tables is the way to go.

 

[WillCast]

If you have a layout that requires a complex grid (i.e. one that would use a lot of "colspans" and "rowspans" in a table-driven layout), check out the Blueprint CSS Framework.

Excellent resource! Didn't knew about it! Thanks.

Rep given.

 

[Menzo]

DIVs are becoming more & more popular but a lot of the browsers still do not render the code properly. DIVs have a little more power than tables on some of the things that they can do so a lot of times I use them in conjunction with one another.

 

[aarh33]

I've been searching for a good 3 days now and can't find any good online tutorials for div design. All I found was a bunch of Myspace layout websites but no tutorials. Anyone know any good tutorials/guides that I can check out b4 buying a book.

in my experience the way i learnt about divs was with learning tutorials on css. the reason i say this is that css and divs work together to create the layout of your page, and the use of css coding allows you define div layouts(what they look like and where type sit etc.). divs are like tables on a page but unlike tables, divs can encompass classes in addition to attributes.

there are plenty of tutorials online on css.
here is a good one i originally learnt from

http://www.westciv.com/style_master/academy/hands_on_tutorial/01.introduction.html

hope that helps