Wednesday, July 08, 2009

DIVs not Tables

My brother-in-law is an HTML extraordinaire and has been telling me for years that DIVs are just better than tables. I never believed him. I though this was just inherited open source community hatred towards Microsoft’s server controls that spit out tables everywhere. But I have been convinced! There is actually a simple demonstrable, measurable benefit to using DIVs over tables. A common scenario is displaying two columns of information with the label in the left and the value in the right column. See the code below, the DIV option is definitely cleaner and results in 7 tags while the table version results in 11. The <label> tag is also more descriptive than a <td> tag.

Granted, in order to make your DIVs line up correctly, you have to use styles, while tables do this by default.

Div version: (7 tags required)

<div>
<div>
<label>scrollTop:</label>
<input type="text" />
</div>
<div>
<label>scrollLeft:</label>
<input type="text" />
</div>
<div id="targetContainer">
<label>Apply to:</label>
<input type="radio" /> window
<input type="radio" /> document
<input type="radio" /> test subject
</div>
</div>


table version: (11 tags required)


<table>
<tbody>
<tr>
<td>
scrollTop:
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
scrollLeft:
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
Apply to:
</td>
<td>
<input type="radio" />
window
<input type="radio" />
document
<input type="radio" />
test subject
</td>
</tr>
</tbody>
</table>