Is a DIV inside a TD a bad idea?

html html-table semantic-markup web-standards
jcollum picture jcollum · Jul 10, 2009 · Viewed 157.7k times · Source

It seems like I heard/read somewhere that a <div> inside of a <td> was a no-no. Not that it won't work, just something about them not being really compatible based on their display type. Can't find any evidence to back up my hunch, so I may be totally wrong.

Answer

Guffa picture Guffa · Jul 10, 2009

Using a div instide a td is not worse than any other way of using tables for layout. (Some people never use tables for layout though, and I happen to be one of them.)

If you use a div in a td you will however get in a situation where it might be hard to predict how the elements will be sized. The default for a div is to determine its width from its parent, and the default for a table cell is to determine its size depending on the size of its content.

The rules for how a div should be sized is well defined in the standards, but the rules for how a td should be sized is not as well defined, so different browsers use slightly different algorithms.

Related questions

How to semantically code an HTML nested table that aligns (and associates) with its parent table's headers

Edit: The selected answer contains a link to the working fiddle I was able to compose without the use of a nested table. I want to semantically code a table in HTML with a layout like the picture below. Unfortunately …

Read More
What's the best way to represent an empty TH in HTML5?

Say I have the given table: +------+------+------+ | Col1 | Col2 | Col3 | +------+------+------+------+ | Row1 | D1.1 | D1.2 | D1.3 | +------+------+------+------+ | Row2 | D2.1 | D2.2 | D2.3 | +------+------+------+------+ | Row3 | D3.1 | D3.2 | D3.3 | +------+------+------+------+ …

Read More
Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this: <table cellspacing="1" cellpadding="1"> How can the same be accomplished using CSS?

Read More