Which DOM elements can be child of tr?
Solution 1:
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
.
Solution 2:
The HTML spec states:
Permitted contents
Zero or more of: one
td
element, or oneth
element
<tr>
elements can contain only <td>
s and <th>
s.
Solution 3:
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.