170

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.

Improve this question

9 Answers 9

Reset to default
170

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.

Improve this answer
5
  • I suspect this is where my hunch came from. Thanks for clearing it up.
    – jcollum
    Commented Jul 13, 2009 at 16:27
  • 9
    If your columns have a pre-specified width, it shouldn't be a problem. Just remember to set table-layout:fixed on the table so browsers don't override your widths (potentially leading to trouble)
    – Jens Roland
    Commented Feb 29, 2012 at 11:45
  • 8
    He never said he was using tables for layouts.
    – texelate
    Commented Apr 21, 2016 at 6:36
  • @texelate table-layout:fixed CSS isn't what you think it is. It reduces amount of calculation browsers do when rendering tables by calculating only the size of the first row.
    – SteveB
    Commented Sep 30, 2016 at 8:58
  • For a practical example (which holds in 2023!) of the differences in browser implementation see: stackoverflow.com/questions/18488148/…
    – cyclingLinguist
    Commented Jan 11, 2023 at 14:59
94

After checking the XHTML DTD I discovered that a <TD>-element is allowed to contain block elements like headings, lists and also <DIV>-elements. Thus, using a <DIV>-element inside a <TD>-element does not violate the XHTML standard. I'm pretty sure that other modern variations of HTML have an equivalent content model for the <TD>-element.

Here are the relevant DTD rules:

<!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">
Improve this answer
5
  • 5
    This is the specific answer I was looking for. So thank you kindly. I imagine I'll sleep slightly better tonight.
    – 3Dom
    Commented Feb 14, 2017 at 12:23
  • The only answer backed by the pec.
    – Peter Chaula
    Commented May 13, 2017 at 16:49
  • Please share with us where in the DTD it explains this. It's not an easy document to read. Thanks!
    – redolent
    Commented Dec 13, 2017 at 4:12
  • 1
    @redolent: I added the relevant DTD rules to my answer.
    – Martin Liversage
    Commented Dec 13, 2017 at 7:00
  • What about HTML5 spec which is not XHTML?
    – crush
    Commented Jan 25, 2019 at 21:22
42

No. Not necessarily.

If you need to place a DIV within a TD, be sure you're using the TD properly. If you don't care about tabular-data, and semantics, then you ultimately won't care about DIVs in TDs. I don't think there's a problem though - if you have to do it, you're fine.

According to the HTML Specification

A <div> can be placed where flow content is expected1, which is the <td> content model2.

Improve this answer
2
  • 3
    I've always wanted to answer a question with a yes or a no ;)
    – Jani Hartikainen
    Commented Jul 10, 2009 at 17:36
  • Even though this got more upvotes I think that Guffa brought up a point that isn't addressed here (and may be the source of my hunch)
    – jcollum
    Commented Jul 13, 2009 at 16:44
14

A table-cell can legitimately contain block-level elements so it's not, inherently, a faux-pas. Browser implentation, of course, leaves this a speculative-theoretical position. It may cause layout problems and bugs.

Though as tables were used for layout -and sometimes still are- I imagine that most browsers will render the content properly. Even IE.

Improve this answer
1
  • I suspect browser implementation is where I got my "wait, that's a bad idea" from.
    – jcollum
    Commented Jul 10, 2009 at 17:54
13

If you want to use position: absolute; on the div with position: relative; on the td you will run into issues. FF, safari, and chrome (mac, not PC though) will not position the div relative to the td (like you would expect) this is also true for divs with display: table-whatever; so if you want to do that you need two divs, one for the container width: 100%; height: 100%; and no border so it fills the td without any visual impact. and then the absolute one.

other than that why not just split the cell?

Improve this answer
1
  • 6
    The only practical, non-holywar answer
    – Antony Hatchkins
    Commented Jan 17, 2012 at 10:22
4

I have faced the problem by placing a <div> inside <td>.

I was unable to identify the div using document.getElementById() if i place that inside td. But outside, it was working fine.

Improve this answer
1

As everyone mentioned, it might not be a good idea for layout purposes. I arrived to this question because I was wondering the same and I only wanted to know if it would be valid code.

Since it's valid, you can use it for other purposes. For example, what I'm going to use it for is to put some fancy "CSSed" divs inside table rows and then use a quick jQuery function to allow the user to sort the information by price, name, etc. This way, the only layout table will give me is the "vertical order", but I'll control width, height, background, etc of the divs by CSS.

Improve this answer
-1

Two ways of dealing with it

  1. put div inside tbody tag
  2. put div inside tr tag

Both approaches are valid, if you see feference: https://stackoverflow.com/a/23440419/2305243

Improve this answer
1
  • 1
    The HTML spec only allows td, th, and script-supporting elements as children of tr, and only tr and script-supporting elements inside tbody.
    – nullptr
    Commented Jul 12, 2023 at 5:11
-5

It breaks semantics, that's all. It works fine, but there may be screen readers or something down the road that won't enjoy processing your HTML if you "break semantics".

Improve this answer
10
  • 13
    @Greg, why does it break semantics? A div is simply a block-level division, or sub-division, of the page content. As such it's not essentially and irrevocably anti-semantic to place them within a table cell.
    – David Thomas
    Commented Jul 10, 2009 at 17:42
  • 2
    I tried to write several responses to you that justified my answer, but I kept coming down to personal opinion. :/ I guess my best response would be that whatever is in your cell can probably be better represented by another HTML tag. If you are truly dividing your cells into components, then you probably shouldn't be using a table to begin with, you should be styling a series of DIVs for your layout. Not sure why I can't put this into better words...chalk it up to IMHO, I suppose.
    – Greg
    Commented Jul 10, 2009 at 17:53
  • Hmm, do you mean that a TD is semantically the same thing as a DIV so why have two of them in a row?
    – jcollum
    Commented Jul 10, 2009 at 17:56
  • 2
    @jcollum: No, I wouldn't say they are semantically the same. TD is definitely a cell in a table; it's a part of a known structure: a table has rows, a row has cells, cells contain data. DIV is just a container ... it can represent anything at anytime anywhere in the document - you have to apply style to it to get any semantics from it in terms of purpose in the markup.
    – Greg
    Commented Jul 10, 2009 at 18:19
  • 7
    A DIV is semantically meaningless, so I don't see how it could ever be incorrect.
    – Rex M
    Commented Jul 10, 2009 at 18:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.