Validation (HTML5): Element 'th' cannot be nested in element 'table'

Question

Given the following HTML, why do you get the error:

Validation (HTML5): Element 'th' cannot be nested in element 'table'

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

Answer 1

You cannot have the <th> element outside of a <tr> , the following snippet is valid

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

<th> Usage context https://developer.mozilla.org/en/docs/Web/HTML/Element/th

Permitted parent elements

A <tr> element.

Answer 2

With thead I was getting the similar warning. This is a razor page in Visual Studio.

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

To mitigate that, I replaced th with tr as follows.

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