CODEWITHSUNDEEP
javascripthtml
Muzza Muzza
Muzza Muzza

Reputation: 43

Table Tag Not Nesting Inside P Tags In DOM

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

Upvotes: 4

Views: 3135

Answers (2)

mu is too short
mu is too short

Reputation: 434785

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.

Upvotes: 6

Fishz
Fishz

Reputation: 465

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

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

Good luck! :)

Upvotes: 0

Related Questions