SitePoint Sponsor

User Tag List

View Poll Results: Will your next website use TABLE tags or DIV tags for layout?

Voters
20. You may not vote on this poll
  • DIVS

    19 95.00%
  • TABLES

    1 5.00%
Results 1 to 22 of 22

Thread: Use DIV or TABLE Tags for Page Layout ?

  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Use DIV or TABLE Tags for Page Layout ?

    When planning a design layout for a new website, perhaps one of the most important decisions you can make is whether to use DIV or TABLE tags to structure and position your page layout.

    The old fashioned way is to use a TABLE, placing various components of your content such as text and images in various cells in order to define position. This approach is relatively straightforward, and offers the best compatibility with an ever increasing number of web browsers that are available. Every browser supports tables. This makes the initial design much less labor intensive. The technique has been used since the mid 1990's when Netscape was the dominant browser.

    Tables get the job done, but more and more often we're seeing sites that are enclosing content in DIV tags and using CSS (cascading style sheets) to control look, feel, and position. It's a lot more work, mainly because of Internet Explorer 5 and 6, which although outdated are still widely used. These browsers may support CSS directives, but not in a way that is fully compliant with CSS specifications. That means your website may appear very differently in Internet Explorer 5/6 than it does in IE 7 or 8, Firefox, Opera, Safari, and of course the new Google Chrome browser.

    In order to get your website to look the way you'd like it to in all these different browsers, you'll need to preview your site in each and then add browser specific tweaks to your CSS. If that's not possible, then at the very least you need to check in IE 6 to make sure a significant number of users are able to access and view your site and that it looks somewhat professional. You may also need to just live with something being a few pixels off in certain browsers as fixing something for one can break it for another.

    That said, I believe DIV tags are the way to go. In spite of the extra work, and possibly having to live with a few differences in how things are displayed between different browsers, DIV with CSS offers some very significant advantages.

    1) It's very easy to completely change the look and feel of your site after the fact, just by changing the style properties of the various DIV tags enclosing your content.

    2) While the look and feel can also be rapidly changed to table cells by applying CSS styles to tables, DIV tags can be repositioned whereas table cells can't be (at least not as quickly and easily). This offers a great benefit to those concerned with SEO as text which may make more sense to include at the bottom of a page to a human being can actually be coded at the top of the page where search engines will find it. Just assign a negative margin and the DIV gets pulled down to where you want it to be seen.

    3) Less code and faster loading time. That may not seem like much of a benefit given that so many people have high speed cable/DSL Internet access... but there are still a lot of people using 56K modems.

    Also, a lot of web hosts still charge for data transfer, so if your web host doesn't provide an unmetered connection then you'll be concerned with the amount of data you're transferring in addition to how quickly your site loads for your visitors.

    Then, there's Adwords. If you're running a Google Adwords campaign you'll be very concerned with something called the "Quality Score". See this post Learn How Adwords Bidding Really Works. One factor used in determining Quality Score is load time, so anything you can do to reduce it, may be of benefit to you... even if it may not be human perceptible difference in load time.

    As more people upgrade to current browsers, the cross-browser CSS issues will fade in importance in the not too distant future. Your website, however will be up and running for a long time to come and throughout the course of operating your website it is certain that you'll need to make several significant updates to content, and look and feel. Tables may make initial development faster and easier right now, but DIV + CSS makes ongoing maintenance and updates faster and easier over the long term. It's cost of purchase vs. cost of ownership for your site.

    In my opinion DIV + CSS offers much better value to a webmaster than tables do when it comes to design layout (except for very small and relatively simple websites).
    Last edited by thewebhost; Sep 6, 2008 at 22:59.
    TheWebHostCompany.com - Where Websites are Served Best℠
    Unlimited Web Hosting with Unlimited 24/7 Support*

    visit our website to subscribe to our FREE newsletter.

    *ask our support team anything - we'll even help you learn PHP.

  2. #2
    Do. Or do not. There is no try silver trophy
    SitePoint Award Recipient ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,343
    Mentioned
    87 Post(s)
    Tagged
    2 Thread(s)
    The question reads:

    Will your next website use TABLE tags or DIV tags for layout?

    And the answers are "yes" and "no"

    If I'm planning to use all div's, should I answer "yes" or "no"
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that would be one good reason to be able to edit poll questions. I apparently made a bit of a typo there. Please use Yes for Div and No for Table.
    TheWebHostCompany.com - Where Websites are Served Best℠
    Unlimited Web Hosting with Unlimited 24/7 Support*

    visit our website to subscribe to our FREE newsletter.

    *ask our support team anything - we'll even help you learn PHP.

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Been using CSS for layout for 4 years with very little issue - would never dream of going back to table layouts.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,537
    Mentioned
    79 Post(s)
    Tagged
    3 Thread(s)
    Poll edited for you so it should make sense now
    Mike Swiffin - Community Team Leader

    Only a woman can read between the lines of a one word answer.....
    I started out with nothing... and still got most of it left!

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any site should use all the element types that they need to convey the site's semantics. There are other HTML elements than DIV and TABLE, you know. And abusing DIVs is no better than abusing TABLEs.

    A better way to phrase the question would be: Will your next site use CSS or tables for layout?
    Birnam wood is come to Dunsinane

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is a very original poll.

    I second what Mr Olsson says and thus find it impossible to vote. Both choices are awful - a bit like presidential elections.

  8. #8
    SitePoint Zealot topgrade's Avatar
    Join Date
    Jun 2007
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depend upon the contents of a page and its importance in terms of SEO. For small contents pages and easy programming, Tables are better choice. In case of large contents or to change the layout of a page dynamically through CSS, then Divs are better.
    DoFollow Backlink Checker | Internet Marketing and SEO Forums

    22,000+ List of Directories to submit your site. List of Blogs, Forums, Press Release, Social Media... (sort by PR & Alexa)

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    15,819
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    If you decide to ignore IE7 and earlier then you can use CSS tables for layout together with the correct semantic tags in your HTML.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by topgrade View Post
    For small contents pages and easy programming, Tables are better choice.
    How did you come to this conclusion? What is your reasoning behind it? And what does programming have to do with this?
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Addict Ronny's Avatar
    Join Date
    Sep 2003
    Location
    Israel
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree that the choice is not between DIVs or Tables rather than between CSS and semantic code or the "good ol'" mashup of content, design and behavior.

    I choose semantic code and css styling, all the way. And this way is getting easier with every new modern browser released. Chrome might not be far better than Firefox, but putting a link to "download a new browser" on Google's homepage in more than 40 countries gets more attention than a news release about the new Firefox 3 at all the major tech blogs together - So IE's part of the cake would get even smaller - Another step in the direction of burying IE6 for good.
    Check out my new vcard at RonnyO.com
    BlinkIP.com - The fastest way to your IP

  12. #12
    SQL Consultant silver trophybronze trophy
    SitePoint Award Recipient r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    38,458
    Mentioned
    34 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    If you decide to ignore IE7 and earlier then you can use CSS tables for layout together with the correct semantic tags in your HTML.
    what are CSS tables for layout?

    presumably you meant to say "use CSS together with the correct semantic tags"

    and i don't understand why you would need to ignore IE to use CSS
    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  13. #13
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think he means using display:table and friends. IE8 is going to be the first version to support them.

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    15,819
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    I think he means using display:table and friends. IE8 is going to be the first version to support them.
    Of course Firefox, Opera, Safari etc already support all those display types and so provided you do not need to support IE7 and earlier you can use semantic HTML and then apply a table layout to it the right way using the CSS.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Of course Firefox, Opera, Safari etc already support all those display types and so provided you do not need to support IE7 and earlier you can use semantic HTML and then apply a table layout to it the right way using the CSS.
    It will be quite some time before you don't need to support IE7 and earlier. IE8 hasn't officially been released yet, and IE6 still has a huge installed user base.
    TheWebHostCompany.com - Where Websites are Served Best℠
    Unlimited Web Hosting with Unlimited 24/7 Support*

    visit our website to subscribe to our FREE newsletter.

    *ask our support team anything - we'll even help you learn PHP.

  16. #16
    SitePoint Enthusiast rjleaman's Avatar
    Join Date
    Aug 2008
    Location
    Atlantic Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, here's a question. Suppose you're not talking about just laying out sections of content on the page (div for header, div for sidebar, etc.) but actually presenting a bunch of data: text in one column, then several columns of figures to be lined up with it, much like a spreadsheet. I could be hopelessly behind the times, but wouldn't tables make sense in that case? I can't imagine how much work it would take to get everything lined up properly in all major browsers, without tables - but oh, how I do hate using them! Suggestions?

  17. #17
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rjleaman View Post
    Okay, here's a question. Suppose you're not talking about just laying out sections of content on the page (div for header, div for sidebar, etc.) but actually presenting a bunch of data: text in one column, then several columns of figures to be lined up with it, much like a spreadsheet. I could be hopelessly behind the times, but wouldn't tables make sense in that case? I can't imagine how much work it would take to get everything lined up properly in all major browsers, without tables - but oh, how I do hate using them! Suggestions?
    Tables would be the most appropriate approach for the display of data in rows and columns, which is the purpose for which the table tag exists in the first place. It has however, been used for page layout very extensively... something tables were never actually intended to be used for.

    Put data in tables... enclose tables in divs, and position the containing div in order to put it where you want on the page.
    TheWebHostCompany.com - Where Websites are Served Best℠
    Unlimited Web Hosting with Unlimited 24/7 Support*

    visit our website to subscribe to our FREE newsletter.

    *ask our support team anything - we'll even help you learn PHP.

  18. #18
    SitePoint Enthusiast rjleaman's Avatar
    Join Date
    Aug 2008
    Location
    Atlantic Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by thewebhost View Post
    Put data in tables... enclose tables in divs, and position the containing div in order to put it where you want on the page.
    Ah, good - that's what logic suggested to me. Thanks!

  19. #19
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rjleaman View Post
    Ah, good - that's what logic suggested to me. Thanks!
    The best websites are based on logic.
    TheWebHostCompany.com - Where Websites are Served Best℠
    Unlimited Web Hosting with Unlimited 24/7 Support*

    visit our website to subscribe to our FREE newsletter.

    *ask our support team anything - we'll even help you learn PHP.

  20. #20
    SitePoint Member
    Join Date
    Aug 2008
    Location
    Lutterworth
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use both Divs and Tables. I use Divs to layout my design, and tables to hold tabular data (What they are intented for).

    Div classes are great because they also cut down on the amount of source code, meaning that your text to code ratio is higher, allowing search engines to better crawl and index your web-site and its' content.

    Once you go Div, you never go back!

  21. #21
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    15,819
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by creare View Post
    I use both Divs and Tables. I use Divs to layout my design, and tables to hold tabular data (What they are intented for).

    Div classes are great because they also cut down on the amount of source code, meaning that your text to code ratio is higher, allowing search engines to better crawl and index your web-site and its' content.

    Once you go Div, you never go back!
    Yes you do. Misusing divs is just as wrong as misusing tables. Using divs to mark the separate divisions of your page is an acceptable use for divs since that is their main purpose. Using them with a class for a tag that you need that doesn't exist is another acceptable purpose. Using them where you should use a list or a heading or a paragraph or a table is just as much misuse of divs as using tables for non-tabular data is a misuse of tables. Too many people who stop misusing tables start misusing divs instead.

    The correct answer to which is better divs or tables is - neither. What is better than both is semantic HTML.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  22. #22
    Non-Member
    Join Date
    Feb 2008
    Posts
    609
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SEO speaking, DIV build website is much SE friendly than TABLE build website.
    But, there are instances that we need to use both at the save time.

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •