Using <div> instead of <table> for layouts

Posted on 2007-07-30
Medium Priority
Last Modified: 2013-11-19
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

Question by:MikeMCSD
LVL 16

Accepted Solution

Joe earned 400 total points
ID: 19592988
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!




LVL 14

Assisted Solution

huji earned 400 total points
ID: 19593298
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

Assisted Solution

DragKng earned 400 total points
ID: 19593324
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

These are more conversational - theoretical - experimental
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


Assisted Solution

BigSi earned 200 total points
ID: 19593505
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.

LVL 10

Assisted Solution

KenAdney earned 200 total points
ID: 19593688
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.
LVL 12

Assisted Solution

oceanbeach earned 400 total points
ID: 19593723
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)...

There are some browser compatibility issues with <div> & CSS, particularly IE < 7 (e.g. IE box model differences) (as mentioned by huji)...

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...

I hope this helps!

LVL 16

Author Comment

ID: 19595198
Thanks everyone for the great information.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question