Using <div> instead of <table> for layouts

I have been using Tables to layout pages. I recently examined a
page layout that used <div> tags and CSS and it seemed interesting.

The way the <div> tags were used was confusing to me.
Are <div> tags hard to learn (compared to <table>)?

Are there browser compatibility issues with <div> & CSS?

Is it worth using <div> instead of tables?  thanks

LVL 16
MikeMCSDAsked:
Who is Participating?
 
JoeConnect With a Mentor Commented:
Hello MikeMCSD,

CSS should be used for design, while tables should be used for data. You should take a look at this CSS tutorial on W3 Schools website. All browser should handle the <div> tags fine, while there may be issues with css2. The following webpage will give you detailed information about css compatibility. Using CSS you will be able to design all aspects of your website in one central location. You will get the greatest benefit from this when you have to change or update your website. You won't have to go to each individual page to do updates on your site if you go the CSS route. Good Luck!

http://www.w3.org/Style/CSS/

http://www.w3schools.com/css/default.asp


Regards,

JoeZ430
0
 
hujiConnect With a Mentor Commented:
Joe is right. TABLE tags shouldn't be used for non-tabular data; a block object (like DIV) should be used for layout. However, unfortunately, different browsers do not work the same with DIV layouts. Internet Explorer, in particular, is a big problem. You cannot have a three-column layout with equal heights only using DIVs with Internet Explorer, for example. You have to either make the columns fixed width, or make their borders eqaul to 0.

However, http://www.wikipedia.org/wiki/ is a very good example I think. It uses DIVs and CSS, no tables, yet it has a very nice design, and works perfectly in all modern browsers (including Internet Explorer).

Hope this help
Huji
0
 
DragKngConnect With a Mentor Commented:
Definitely hit up the w3schools link that JoeZ recommended.

For learning css/html I find these sites the best reference

this is has a simple start
http://www.cssbasics.com/

These are more conversational - theoretical - experimental
http://www.contentwithstyle.com
http://www.positioniseverything.com
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
BigSiConnect With a Mentor Commented:
I've recently moved away from using tables to using DIV tags too, I had worked with tables and CSS for a while which helped a lot but you deffinetly need to do some reading behind it all. I found a book by sitepoint, HTML Utopia, 'Designing without tables' by Rachel Andrew quite a good place to start as it also highlighted that tables should only be used for data.

You may also want to take a look at CSS Zen Garden (http://www.csszengarden.com/) which highligts how using css correctly can really change your site appearance just by changing the CSS references.

-Si.
0
 
KenAdneyConnect With a Mentor Commented:
My favorite book for learning CSS is "Eric Meyer on CSS" which takes the approach of converting traditional pages to using CSS and works from simple to more complex design.
0
 
oceanbeachConnect With a Mentor Commented:
Hello MikeMCSD,

Just a few things to add...I do not think learning how to use div tags is too difficult, but it may require some research (and perhaps a good book or two as mentioned by BigSi & KenAdney)...
http://www.alistapart.com/stories/practicalcss
http://glish.com/css/
http://www.cssbasics.com/

There are some browser compatibility issues with <div> & CSS, particularly IE < 7 (e.g. IE box model differences) (as mentioned by huji)...
http://www.positioniseverything.net/explorer.html 

I believe it is worth using divs over tables...it has a cleaner markup, it is better for accessibility (e.g. screen readers) and tables are meant for tabular data (as mentioned by JoeZ430).  I do not think it was mentioned, but css can be used on tables as well as divs.

Something that may be helpful for learning div based layouts would be some online generators.  You can try some different layouts & see how the css changes accordingly...
http://csscreator.com/?q=tools/layout
http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

I hope this helps!

oceanbeach
0
 
MikeMCSDAuthor Commented:
Thanks everyone for the great information.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.