[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 185
  • Last Modified:

Using DIVs to Build a Table

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">
    <tr>
        <td colspan="8" align="center">Header 1</td>
    </tr>
    <tr>
        <td colspan="4" align="center">Subheader 1</td>
        <td colspan="4" align="center">Subheader 2</td>
    </tr>
    <tr>
       <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> 
    </tr>
</table>

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
0
MinnRick
Asked:
MinnRick
2 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
maeltarCommented:
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....
0
 
Chris StanyonCommented:
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 (http://www.w3schools.com). 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 !



0
 
MinnRickAuthor Commented:
Thanks all for the needed counsel - most helpful.
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome, glad to help.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now