HTML报错：当前上下文不允许tbody作为table的子元素

这个报错我太熟了！本质是你的HTML表格结构不符合规范，浏览器解析时发现<tbody>被放在了不允许的上下文里，报错提示Element tbody not allowed as child of element table in this context就是这个意思。

常见原因 #

最可能的情况是：你的表格里已经存在浏览器自动创建的隐式<tbody>元素。比如在<tfoot>之前，你直接写了<tr>标签但没把它们包裹在<thead>或<tbody>里，浏览器会自动为这些裸行生成一个隐式的<tbody>，这时候你再手动添加<tbody>，就会导致它被当作<table>的直接子元素，和隐式<tbody>冲突，触发报错。

修复方案 #

你需要把表格的所有行都正确归类到对应的区块里，HTML表格的标准结构应该是这样的：

<table>
  <!-- 可选：表格标题 -->
  <caption>超自然生物统计数据</caption>
  <!-- 表头行必须包裹在<thead>里 -->
  <thead>
    <tr>
      <th>生物类型</th>
      <th>种群信息</th>
      <th>目击次数</th>
      <th>攻击记录</th>
    </tr>
  </thead>
  <!-- 页脚可以放在<tbody>之前或之后，建议放在前面方便屏幕阅读器解析 -->
  <tfoot>
    <tr>
      <td colspan="4">数据来源：超自然研究档案</td>
    </tr>
  </tfoot>
  <!-- 所有主体内容行必须包裹在<tbody>里 -->
  <tbody>
    <tr>
      <td>Werewolves</td>
      <td>100 sighting</td>
      <td>12 sightings</td>
      <td>210 people were attacked</td>
    </tr>
    <tr>
      <td>Vampires</td>
      <td>5,000 vampires live in the U.S., drink donors' blood</td>
      <td>206 sightings</td>
      <td>Unknown</td>
    </tr>
    <!-- 更多行继续放在这里 -->
  </tbody>
</table>

关键检查点 #

• 绝对不要让<tr>直接作为<table>的子元素，所有行必须属于<thead>、<tfoot>或<tbody>中的一个。
• 如果你的表格没有表头，那所有非页脚的行都要包裹在<tbody>里，不能有例外。

举个反例（就是会触发你报错的情况）：

<table>
  <!-- 这里的<tr>没有被包裹，浏览器自动生成隐式<tbody> -->
  <tr>
    <th>生物类型</th>
    <th>种群信息</th>
  </tr>
  <tfoot>
    <tr>
      <td colspan="4">数据来源：超自然研究协会</td>
    </tr>
  </tfoot>
  <!-- 这里的<tbody>和隐式<tbody>冲突，触发报错 -->
  <tbody>
    <tr>
      <td>Werewolves</td>
      <td>100 sighting</td>
    </tr>
  </tbody>
</table>

按照标准结构调整后，这个报错就会消失啦！

内容的提问来源于stack exchange，提问作者Extrememind