元素 'th'不能嵌套在元素 'table' 中

Question

给出以下HTML，为什么会出现错误:

验证(HTML5):元素'th'不能嵌套在元素'table'

<table>
    <th>ID</th>
    <th>text header</th>
    <tr>
        <td>7</td>
        <td>text</td>
    </tr>
</table>

Answer 1

不能将<th>元素放在<tr>之外，下面的代码片段是有效的

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>text header</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>7</td>
        <td>text</td>
    </tr>
    <tbody>
</table>

& lt; th>使用背景 https://developer.mozilla.org/en/docs/Web/HTML/Element/th

允许的父元素

<tr>元素。

Answer 2

对于thead，我得到了类似的警告。这是Visual Studio中的razor页面。

<table>
    <thead>
        <th>Id</th>
        <th>Name</th>
    </thead>
    <tbody>
        @foreach(var customer in Model.Customers.Take(100))
        {
            <tr>
                <td>@customer.Id</td>
                <td>@customer.Name</td>
            </tr>
        }
    </tbody>
</table>

为了减轻这种情况，我将th替换为tr，如下所示。

<table>
    <thead>
        <tr>Id</tr>
        <tr>Name</tr>
    </thead>
    <tbody>
        @foreach(var customer in Model.Customers.Take(100))
        {
            <tr>
                <td>@customer.Id</td>
                <td>@customer.Name</td>
            </tr>
        }
    </tbody>
</table>