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

html, html-table

Solution

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

Problem

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

Original source

Related problems