Coder Perfect

Is a DIV inside a TD a bad idea


I seem to recall hearing/reading somewhere that putting a div> inside a td> was a no-no. It’s not that it won’t work; it’s just that their display types aren’t entirely compatible. I can’t locate any proof to support my suspicions, so I could be completely incorrect.

Asked by jcollum

Solution #1

Using a div instead of a td isn’t any worse than any other method of table layout. (However, some people, including myself, never use tables for layout.)

If you utilize a div in a td, you’ll get into a situation where it’s difficult to forecast how the elements will be sized. The width of a div is determined by its parent by default, while the size of a table cell is determined by the size of its content by default.

The rules for sizing a div are well specified in the standards, while the rules for sizing a td are not so well defined, therefore different browsers employ somewhat different algorithms.

Answered by Guffa

Solution #2

I realized that a TD>-element can contain block elements such as headings, lists, and DIV>-elements after consulting the XHTML DTD. As a result, using a DIV>-element within a TD>-element is not against the XHTML standard. Other recent HTML versions, I’m very sure, have an equivalent content model for the TD>-element.

The following are the DTD rules that apply:

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

Answered by Martin Liversage

Solution #3

No. Not necessarily.

If you need to use a DIV inside a TD, be sure you’re using it correctly. If you don’t care about tabular data or semantics, you won’t worry about DIVs in TDs in the end. However, I don’t believe there is a problem; if you have to do it, you’ll be OK.

The HTML Specification states:

The td> content model2 allows a div to be placed where flow content is expected1.

Answered by Sampson

Solution #4

It is not fundamentally a faux-pas for a table-cell to include block-level items. Of course, browser implementation makes this a speculative-theoretical position. It may result in bugs and layout issues.

Although, because tables were (and often still are) utilized for layout, I believe that most browsers will render the material correctly. Even Internet Explorer.

Answered by David Thomas

Solution #5

You’ll get into problems if you use position: absolute; on the div and position: relative; on the td. The div will not be positioned relative to the td in FF, safari, or chrome (mac, but not PC) (like you would expect) This is likewise true for divs that have a display: attribute. table-whatever; so if you want to do that, you’ll need two divs, one for the container (width: 100 percent; height: 100 percent; and no border so it fills the td without any visual impact) and one for the content (width: 100 percent; height: 100 percent; and no border so it fills the td without any visual impact). Then there’s the absolute.

Otherwise, why not simply split the cell?

Answered by zeel

Post is based on