Which DOM elements can be child of tr?

Question

I have problem becouse I want to surround some of td inside tr so I need to know.

Which DOM elements can be child of tr? (I know div cannot.)

paxdiablo · Accepted Answer · 2019-03-03T04:24:26.393

16

W3C specify this stuff. For tr, you can find it here. Basically, only th and td elements can be direct contents of tr.

If you want other stuff inside your table, it has to go inside the td or th elements. For example, td can contain flow elements, including div.

edited Mar 03 '19 at 04:24

answered Sep 28 '12 at 06:34

paxdiablo

854,327
234
1,573
1,953

score 8 · Answer 2 · edited Jun 20 '20 at 09:12

8

The HTML spec states:

Permitted contents

Zero or more of: one td element, or one th element

<tr> elements can contain only <td>s and <th>s.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 28 '12 at 06:33

Blender

289,723
53
439
496

2

`` elements *can* contain both at the same time. – Alohci Sep 28 '12 at 06:57
2

@Blender - Well, you're really reading a reference, not the spec. The [HTML5 spec](http://dev.w3.org/html5/spec/the-tr-element.html#the-tr-element) says "Zero or more td or th elements". The [HTML4 spec](http://www.w3.org/TR/html4/struct/tables.html#h-11.2.5) says `<!ELEMENT TR - O (TH|TD)+ -- table row -->`. But you're misreading the reference; it says "zero or more of: one td element, or one th element". Note the position of the colon. It's (one td element or one th element) sero or more times. But in any case, it's an easy test to check it in a validator. – Alohci Sep 28 '12 at 18:35

score 2 · Answer 3 · answered Mar 30 '20 at 11:46

The situation is very similar to that of ul which I have described in detail at: Can we use any other TAG inside <ul> along with <li>? so I recommend you read that first.

Notably, the less obvious point is that ASCII whitespace does not form text nodes, while any non-whitespace characters forms and illegal text node, which cannot be children of table.

Then, in the "Content model" of tr in the current standard https://html.spec.whatwg.org/multipage/tables.html#the-table-element we see:

Content model: Zero or more td, th, and script-supporting elements.

score 0 · Answer 4 · answered Sep 28 '12 at 10:17

If the question is about a DOM tree constructed from an HTML document that conforms to HTML specifications, then the answer is td and th, as explained in paxdiablo’s answer.

But you can modify a DOM tree as you like, in scripting. For example:

<!doctype html>
<table border>
<tr><td>foo <td>bar
</table>
<script>
var p = document.createElement('div');
p.innerHTML = 'Hello world!';
document.getElementsByTagName('tr')[0].appendChild(p);
</script>

This will make a div element a child of a tr element. You could even put create some td elements and make them children of the div element.

Whether this makes sense and whether it might confuse browsers is a different issue. And browsers will not parse normally HTML markup where e.g. tr element contains a div element as a child – parsers are not prepared to handle such cases. Grouping td elements (in any other way than making them children of a tr) is not possible in HTML markup. But in the DOM, you can create odd trees.

If just want to deal with some td elements in a special way, give them a class.

Which DOM elements can be child of tr?

4 Answers4

Permitted contents

Linked

Related