table tr td p h2 - 那有什么问题？

Question

为什么我不能将h2放在表格单元格内？ （在Chrome和FF上测试）

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

http://jsfiddle.net/4e6Lp/

段落内容跳转到td，p变为空：

Answer 1

关注这些来源：http://risd.generic.cx/containment.html p元素只能保留：

• TextNode
• 一个
• 强
• EM
• IMG

但我认为<p>可以包含任何内联和内联块元素。

Answer 2

p的内容模型仅允许“内联”或“文本级”内容。确切的内容模型（和术语）因HTML版本而异，但没有版本将h2视为内联/文本级别。参见例如HTML 4.01 spec text on the p element。如果你在HTML中用它的旧含义来考虑p，那么这个要求是相当自然的：它标记了一段文字。它基本上是一个复制文本块。

内容模型由浏览器通过解析规则强制执行：当p元素打开时，<h2>标记会隐式关闭它。因此，在问题中给出的情况下，td元素包含一个p元素，只有空格作为内容，然后是h2元素，然后是“松散”文本（只是一个文本节点） ）。

结论取决于您希望将单元格内容包装在p元素中的原因。通常情况下，没有理由这样做。但是如果你需要一个包装器，请使用div元素。

Answer 3

除非故意将其作为标题，否则您可以将文本改为粗体：

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

或者，正如@ Epsil0neR所说，使用<h2>段之外的<p>标题