Is a DIV inside a TD a bad idea?

Question

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.

Guffa · Accepted Answer · 2014-11-26T15:15:55.877

164

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.

edited Nov 26 '14 at 15:15

answered Jul 10 '09 at 18:26

Guffa

687,336
108
737
1,005

I suspect this is where my hunch came from. Thanks for clearing it up. – jcollum Jul 13 '09 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 Feb 29 '12 at 11:45
8

He never said he was using tables for layouts. – texelate Apr 21 '16 at 06: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 Sep 30 '16 at 08:58
For a practical example (which holds in 2023!) of the differences in browser implementation see: https://stackoverflow.com/questions/18488148/how-to-get-div-height-100-inside-td-of-100 – cyclingLinguist Jan 11 '23 at 14:59

Martin Liversage · Answer 2 · 2017-12-13T07:00:32.610

91

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

edited Dec 13 '17 at 07:00

answered Jul 10 '09 at 17:54

Martin Liversage

104,481
22
209
256

4

This is the specific answer I was looking for. So thank you kindly. I imagine I'll sleep slightly better tonight. – 3Dom Feb 14 '17 at 12:23
The only answer backed by the pec. – Peter Chaula May 13 '17 at 16:49
Please share with us where in the DTD it explains this. It's not an easy document to read. Thanks! – redolent Dec 13 '17 at 04:12
1

@redolent: I added the relevant DTD rules to my answer. – Martin Liversage Dec 13 '17 at 07:00
What about HTML5 spec which is not XHTML? – crush Jan 25 '19 at 21:22

Sampson · Answer 3 · 2016-01-25T17:56:23.173

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 expected¹, which is the <td> content model².

edited Jan 25 '16 at 17:56

answered Jul 10 '09 at 17:35

Sampson

265,109
74
539
565

3

I've always wanted to answer a question with a yes or a no ;) – Jani Hartikainen Jul 10 '09 at 17:36
+1 - really wanted to answer with something wittier, but failed. – karim79 Jul 10 '09 at 17:47
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 Jul 13 '09 at 16:44

score 14 · Answer 4 · answered Jul 10 '09 at 17:37

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.

answered Jul 10 '09 at 17:37

David Thomas

249,100
51
377
410

I suspect browser implementation is where I got my "wait, that's a bad idea" from. – jcollum Jul 10 '09 at 17:54

score 13 · Answer 5 · answered May 25 '11 at 04:49

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?

The only practical, non-holywar answer – Antony Hatchkins Jan 17 '12 at 10:22 — Antony Hatchkins, Jan 17 '12 at 10:22

score 3 · Answer 6 · edited Nov 20 '11 at 02:34

3

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.

edited Nov 20 '11 at 02:34

Clive

36,918
8
87
113

answered Jul 12 '11 at 09:47

Himaja

41
1

score 1 · Answer 7 · answered Jul 07 '11 at 17:27

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.

score 0 · Answer 8 · edited May 23 '17 at 12:26

0

Two ways of dealing with it

put div inside tbody tag
put div inside tr tag

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

edited May 23 '17 at 12:26

Community

1
1

answered Nov 03 '16 at 23:25

Alan Dong

3,981
38
35

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 Jul 12 '23 at 05:11

score -5 · Answer 9 · answered Jul 10 '09 at 17:37

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

answered Jul 10 '09 at 17:37

Greg

1,126
2
11
26

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 Jul 10 '09 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 Jul 10 '09 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 Jul 10 '09 at 17:56
Yea I don't really agree that `
` elements offer or alter any semantic information at all. They have about the same semantic information as a blank space, only in a different direction.
– SingleNegationElimination Jul 10 '09 at 18:00
@Greg; I agree wholeheartedly with your sentiment, it *feels* wrong. And also I agree, if sub-divisions are required in a table-cell, that the content's -probably- being presented inappropriately. But it's still not *inherently* technically, or ethically, or semantically wrong. I know I'd feel dirty though... =] – David Thomas Jul 10 '09 at 18:01
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 Jul 10 '09 at 18:19
7

A DIV is semantically meaningless, so I don't see how it could ever be incorrect. – Rex M Jul 10 '09 at 18:29
You won't find anyone more zealously pro-semantics than myself here, and a div inside a td absolutely does not inherently break any semantics, especially considering the semantic meaning of a div is *only* a logical division. It might well be completely redundant tag bloat in the specific, but it's fine in the abstract. – annakata Jul 10 '09 at 18:32
I feel that if you're using a `DIV` to divide content in a table cell, then you should be using extra table cells. Think about it like a database - each cell should have one piece of data. – DisgruntledGoat Jul 12 '09 at 20:33
For example.. lets say (like in my example here).. I got a bunch of Jeans "Fitting Sizes" tables that pop from modals. Now in the Col. of headers for all the rows.. the TD is like this Size......... Problem is, how do you get the "...." to expand and contract within the TD. Now you get why we ask. you need to DIV and set the background with and overflow-off setting.. or so thats what I am attempting now to make this adjustable TD based on the size of content. – John Drefahl Nov 28 '11 at 23:53

Is a DIV inside a TD a bad idea?

9 Answers9

Linked