CSS HTML表格的多个tbody标签是否有效

在本文中，我们将介绍HTML表格中多个tbody标签的有效性问题。

HTML表格是构建和展示数据的重要工具。通常情况下，一个表格包含thead、tbody和tfoot三个主要部分。thead用于定义表格的表头部分，tbody用于定义表格的主体内容部分，tfoot用于定义表格的页脚部分。

在标准的HTML规范中并没有明确规定一个表格是否可以有多个tbody标签。然而，根据浏览器的解析行为和实践经验来看，多个tbody标签在某些情况下是有效的。

阅读更多：CSS 教程

标准规范

根据HTML5规范，每个tbody标签都必须包含至少一个tr标签。在一个表格中，如果只有一个tbody标签且不包含任何tr标签，那么这个表格是无效的，浏览器可能会显示异常行为。但是，当出现多个tbody标签时，每个tbody标签都必须至少包含一个tr标签。

下面是一个无效的表格示例：

<table>
  <tbody>
    <!-- 这里没有tr标签 -->
  </tbody>
</table>

下面是一个有效的表格示例：

<table>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
  </tbody>
</table>

浏览器解析行为

尽管HTML规范没有明确限制一个表格是否可以有多个tbody标签，但不同浏览器在解析多个tbody标签时可能存在差异。一些浏览器会忽略多余的tbody标签，而另一些浏览器可能会根据标签的数量来生成新的tbody标签。

以下是不同浏览器对多个tbody标签的解析行为示例：

<table>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>单元格3</td>
      <td>单元格4</td>
    </tr>
  </tbody>
</table>

在Chrome浏览器中，上述表格会被解析为一个包含两个tbody标签和两行单元格的表格。
在Firefox浏览器中，上述表格会被解析为一个包含一个tbody标签和两行单元格的表格。
在Internet Explorer浏览器中，上述表格会被解析为一个包含一个tbody标签和两行单元格的表格。

由于浏览器的差异，当存在多个tbody标签时，为了保证跨浏览器的一致性，建议按照HTML规范的要求，每个tbody标签都至少包含一个tr标签。

示例说明

假设我们有以下的表格数据：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>小红</td>
      <td>18</td>
    </tr>
    <tr>
      <td>小华</td>
      <td>19</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">表格底部</td>
    </tr>
  </tfoot>
</table>

根据HTML规范的要求，上述表格是有效的。在浏览器中，这个表格会显示两个tbody标签，分别包含两行和一行数据。tfoot部分将会显示在表格的底部。