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.

Xanthochroism

Answer 1

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.

Khartoum

I suspect this is where my hunch came from. Thanks for clearing it up. – Xanthochroism

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) – Breana

He never said he was using tables for layouts. – Peake

@Peake 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. – Polyhydroxy

For a practical example (which holds in 2023!) of the differences in browser implementation see: #18488648 – Sudan

Answer 2

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

Ejective

This is the specific answer I was looking for. So thank you kindly. I imagine I'll sleep slightly better tonight. – Farmland

The only answer backed by the pec. – Meingolda

Please share with us where in the DTD it explains this. It's not an easy document to read. Thanks! – Equinoctial

@redolent: I added the relevant DTD rules to my answer. – Ejective

What about HTML5 spec which is not XHTML? – Taskwork

Answer 3

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

Bamberg

I've always wanted to answer a question with a yes or a no ;) – Shantay

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) – Xanthochroism

Answer 4

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.

Servant

I suspect browser implementation is where I got my "wait, that's a bad idea" from. – Xanthochroism

Answer 5

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?

Bulla

The only practical, non-holywar answer – Disfavor

Answer 6

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.

Rodrickrodrigez

Answer 7

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.

Spalla

Answer 8

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://mcmap.net/q/145310/-can-we-add-div-inside-table-above-every-lt-tr-gt

Confluent

The HTML spec only allows td, th, and script-supporting elements as children of tr, and only tr and script-supporting elements inside tbody. – Platinocyanide

Answer 9

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

Alcestis

@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. – Servant

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. – Alcestis

Hmm, do you mean that a TD is semantically the same thing as a DIV so why have two of them in a row? – Xanthochroism

Yea I don't really agree that <div> 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. – Sarajane

@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... =] – Servant

@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. – Alcestis

A DIV is semantically meaningless, so I don't see how it could ever be incorrect. – Karakorum

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. – Heptangular

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. – Kremer

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 <td>Size........</td>. 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. – Autonomy