0

Why I can't place h2 inside paragraph inside table cell? (tested on Chrome and FF)

<table>
    <tr>
        <td>
            <p>
                <h2>Header</h2>
                test123
            </p>
        </td>
    </tr>
</table>

http://jsfiddle.net/4e6Lp/

Paragraph content jumps out to the td and p becomes empty:

chrome render

2
  • @Wilf, in code he has p>h2, but in browser he has p+h2
    – Epsil0neR
    Feb 23, 2014 at 20:26
  • @Epsil0neR - I noticed that, and then you posted the answer. :D
    – Wilf
    Feb 23, 2014 at 20:27

3 Answers 3

2

Following to these source: http://risd.generic.cx/containment.html p element can hold only:

  • TextNode
  • a
  • strong
  • em
  • img

But I think that <p> can hold any inline and inline-block element.

1

The content model of p allows only “inline” or “text-level” content. The exact content model (and terminology) varies by HTML version, but no version regards h2 as inline/text-level. See e.g. HTML 4.01 spec text on the p element. The requirement is rather natural if you think of p in its old meaning in HTML: it marks up a paragraph of text. It’s basically a block of copy text.

The content model is enforced by browsers, by parsing rules: when a p element is open, an <h2> tag implicitly closes it. So in the case given in the question, the td element contains a p element with just whitespace as content, then an h2 element, and then “loose” text (just a text node).

The conclusions depend on your reasons for wanting to wrap the cell content in a p element. Normally, there is no reason to that. But if you need a wrapper, use the div element instead.

0

Unless it is intentionally meant to be a header, you can just make the text bold instead:

<table>
    <tr>
        <td>
            <p>
                <strong>Header</strong><br>
                test123
            </p>
        </td>
    </tr>
</table>

Or, as @Epsil0neR says, use the <h2> header outside of <p> paragraph

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.