Using <div> instead of <table> for layouts

Posted on 2007-07-30
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

    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

    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, 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
    LVL 3

    Assisted Solution

    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
    LVL 2

    Assisted Solution

    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 ( which highligts how using css correctly can really change your site appearance just by changing the CSS references.

    LVL 10

    Assisted Solution

    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

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

    Thanks everyone for the great information.

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Suggested Solutions

    What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    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…

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now