In HTML, what is the advantage of using divs over using tables?

Question

After years of working on the backend algorithmic and analytic stuff, I have recently been forced to do some "HTML work". (And you guys have something called jQuery now, is that right?) Anyhoo, back when I used to do HTML (prior to XHTML days), tables were very very common. Now, I see a deluge of support for "div"s and honorifics such as "table-less!". To catch up on the years that I missed, what is the reason that divs are preferred over tables? [I recently tried to do a simple two column table (66%,33%) into divs, and the bruises are still fresh.]

I realize that the question may be subjective, so as a specific subquestion: What is the easy and concise div based HTML that renders the following table:

<table>
      <tr>
         <td width="33%">Name</td>
         <td width="67%">Description</td>
     </tr>
     <tr>
         <td>National Hockey League</td>
         <td>A much longer paragraph about the league</td>
    </tr>
</table>

A big reason is that you want the HTML markup to define the "structure" of the document, and the CSS to define the "look and feel". A element should represent a table of information, rather than a quick way to get a desired layout. That being said, the new grid and flexbox layout options available in CSS3 will make all this a *lot* easier. — dlev, May 09 '12 at 19:13

score 13 · Accepted Answer · answered May 09 '12 at 19:12

13

Tables shouldn't be used for page layouts because they are:

Slow to render as the browser needs to download most, if not all of the table to render it properly
They require more HTML then non-table layouts which means slower loading and rendering as well as increased bandwidth usage
They can be a nightmare to maintain as they can get complex quickly
They can break text copying
They negatively affect screenreaders and may make your cone\tent inaccessible to some users
They are not as flexible as using proper semantic markup
They were never intended to be used for page layouts

answered May 09 '12 at 19:12

John Conde

217,595
99
455
496

And how about the specific question - how to render a simple 2 col table using divs? – Amrinder Arora May 09 '12 at 19:17
@AmrinderArora You asked multiple questions, however John's answer best addresses your question, as it is stated in the question title (and again in the body). – Madbreaks May 09 '12 at 19:20
@Madbreaks The subquestion is really an "instance" of the question. For example, John's response says that table based code can be nightmare to maintain. From that I infer that div based code is easy to maintain. The answer to subquestion would serve as a great example for that. – Amrinder Arora May 09 '12 at 19:22
+1 for the screenreader bit. Also referenced here: http://stackoverflow.com/questions/2399530/why-table-is-not-good-for-layout-while-div-is-for-screen-reader-users – Chris Fletcher May 09 '12 at 19:33

Madbreaks · Answer 2 · 2012-05-09T19:35:36.867

2

If you're rendering tabular data, by all means use tables - that's what they're intended for. Your example probably qualifies! But don't use tables to create page structure for the many reasons provided in John Conde's answer.

Cheers

edited May 09 '12 at 19:35

answered May 09 '12 at 19:18

Madbreaks

19,094
7
58
72

Thanks, that is helpful. If I understand this, tables started getting used for a lot of layout reasons, and the divs are right way to do that, I agree. Also, I gather that it is not that the tables are considered evil (thank god for that!), it is just that their overuse is. Do I have it right? – Amrinder Arora May 09 '12 at 19:29
Correct. To be more specific though (not to beat a dead horse) it is using them to define page layout/structure that is considered evil. And FWIW don't let anyone tell you that doing div-based layouts is easier, because it's not. But you *will* get used to it (we all do). As mentioned elsewhere CSS3 helps tremendously. – Madbreaks May 09 '12 at 19:35
Thanks again. If I could see the div based code for that table, my getting used to part might just begin. Might be able to close the question as well! – Amrinder Arora May 09 '12 at 19:40
I'd counter - why create a div-based representation of a table? Just use a table! What we're discussing is layouts, and why you shouldn't use tables for layouts. – Madbreaks May 09 '12 at 19:52

score 0 · Answer 3 · answered May 09 '12 at 19:37

0

With modern HTML standards; tables should only be used for displaying tabular data; http://webdesign.about.com/od/tables/a/aa122605.htm

answered May 09 '12 at 19:37

Sam

5,150
4
30
51

In HTML, what is the advantage of using divs over using tables?

3 Answers3