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