Using DIVs to Build a Table

Posted on 2011-10-24
Last Modified: 2012-05-12
Hello Experts -
I've run into many opinions online which more or less declare that the <TABLE> is dead and that the DIV is now the proper means to deliver structured data on a web page.  I'm wondering if, in the opinion of this audience, this is now a hard and fast rule (if one is going to adhere to best practices) or whether there are instances where it still makes sense to write to tables.  Take, for instance, the following:
<table cellspacing="0" cellpadding="0" border="1">
        <td colspan="8" align="center">Header 1</td>
        <td colspan="4" align="center">Subheader 1</td>
        <td colspan="4" align="center">Subheader 2</td>
       <td align="center">1</td> 
       <td align="center">2</td> 
       <td align="center">3</td> 
       <td align="center">4</td> 
       <td align="center">5</td> 
       <td align="center">6</td> 
       <td align="center">7</td> 
       <td align="center">8</td> 

Open in new window

Do modern WebDev best practices say that output such as this should be built and rendered with DIVs?  If so then could someone give me a few tips on how to achieve the multi-column headers, shrink/expand-to-fit of all cells, etc., for this output?  If not then is there a rule of thumb (or two) that adherents to modern best practices should use to decide when to use a table and when to use DIVs?  Thanks.

-- Rick
Question by:MinnRick
    LVL 82

    Accepted Solution

    Tables and Divs were created at the same time in HTML history.  The "Web Police" are trying to declare tables dead but they are of course wrong.  I use tables when they work better and divs when they work better.  The original "complaint" about tables are #1: the browser has to wait until the whole table is loaded to render it.  #2: too many people were using too many nested tables creating ugly layout for the people who came after them and had to maintain them.  Ugh!!  But I have seen just as big a mess with nested divs.  Ugh! again.

    Note that divs do Not really create tables with the attributes of tables.  Table cells and rows are tied to each other in ways that you can not do with divs.

    Best practice is to ignore people who talk without thinking and who make rules without purpose.
    LVL 11

    Expert Comment

    I agree with Dave, usually these people who rant about using divs not tables are the ones who claim notepad is the best html editor...  enough said.....

    Use what you feel comfortable with and the end result is as required....
    LVL 42

    Assisted Solution

    by:Chris Stanyon
    I think the argument came about because of the misuse of TABLE tags - many people were using tables for Layout, and as Dave says, it created ugly code which was not only a nightmare for developers to get on top of, but rendered a page pretty useless to screen readers, search engines etc.

    The TABLE tag, and all related tags are still as relevant today as they always have been - just try and use them correctly.

    If you have to display TABULAR data (rows and columns of information), then use tables - that what they were designed for.

    DIVS are for divisions in your page and help with layout. For example, it can often make sense to put your navigation in it's own DIV, your columns in their own DIVs and your footer in a DIV. These are logical divisions to your page, so you would be using them correctly.

    Bear in mind though that tables can still be used in an ugly way, even for tabular data. As well as the TABLE, TR and TD tags, you also have THEAD, TBODY, TFOOT, COLGROUP and COL. Check the W3C site for full info ( Also some of the attributes that people tend to use in tables are deprecated and should be moved over to CSS - <td width="50px"> spring to mind !


    Author Comment

    Thanks all for the needed counsel - most helpful.
    LVL 82

    Expert Comment

    by:Dave Baldwin
    You're welcome, glad to help.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    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…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    759 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

    8 Experts available now in Live!

    Get 1:1 Help Now