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>
    <thead>
        <tr>
            <th>ID</th>
            <th>text header</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>7</td>
        <td>text</td>
    </tr>
    <tbody>
</table>

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

Permitted parent elements

A <tr> element.