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 /pp table /table /p /form was not seeing the table as innerHTML of the second p but instead listed the table as a sibling of that p tag rather than a child.

I figure this is a well known behaviour.

What is the gap in my knowlegde?

TIA

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> (ie 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! :)