Table Tag Not Nesting Inside P Tags In DOM

Question

I have been playin with dynamic changes to innerHTML content and have noticed some strange behaviour with tables nested inside other elements.

For example form p /p

Answer 1

You can't put a <table> inside a <p>. From the HTML4 specification:

<!ELEMENT P - O (%inline;)* -- paragraph -->
[...]
It cannot contain block-level elements (including P itself).

And then if you look at what the %inline; elements are, you won't find <table> in the list.

And for HTML5, <p> can contain phrasing content:

Permitted contents

Phrasing content

And phrasing content is character data and phrasing elements, phrasing elements are:

a or em or strong or small ... meter

There's no <table> in that list.

So you're trying to insert invalid HTML and the browser is changing <p><table></table></p> into <p></p><table></table> (i.e. moving the table child up to a sibling) in order to get valid HTML.

If you give the browser invalid HTML, the browser will guess what you really mean and go with its guess.

Answer 2

This is because both <p> and <table> are block-level elements.

Use a container element for your table, like a <div>.

Good luck! :)