如何使用 HTML5 对表格的标题内容进行分组？

在 HTML 表格中，经常需要对表格的标题内容进行分组，以便更好地组织表格数据。HTML5 提供了 <thead>、<tbody>、<tfoot> 这三个元素，可以很方便地对表格的标题进行分组。

分组表格标题内容

Thead 元素

<thead> 元素用于定义表格的表头，它包含了一个或多个表格行（<tr> 元素），每个表格行包含了一个或多个表头单元格（<th> 元素），用于表示列标题或行标题。一般情况下，表头行的数量为 1。

例子：

| 表头1 | 表头2 | 表头3 |
| ----- | ----- | ----- |
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |

改为：

<table>
  <thead>
    <tr>
      <th colspan="2">表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

Tbody 元素

<tbody> 元素用于定义表格的主体部分，它包含了一个或多个表格行（<tr> 元素），每个表格行包含了一些单元格（<td> 元素），用于表示表格的数据。

例子：

| 表头1 | 表头2 | 表头3 |
| ----- | ----- | ----- |
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |

改为：

<table>
  <thead>
    <tr>
      <th colspan="2">表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

Tfoot 元素

<tfoot> 元素用于定义表格的脚注部分，它包含了一个或多个表格行（<tr> 元素），每个表格行包含了一个或多个表格单元格（<td> 或 <th> 元素），用于表示表格的汇总数据。

例子：

| 表头1 | 表头2 | 表头3 |
| ----- | ----- | ----- |
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |

改为：

<table>
  <thead>
    <tr>
      <th colspan="2">表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td></td>
      <td></td>
      <td>内容3+内容6 = 内容9</td>
    </tr>
  </tfoot>
</table>

总结

HTML5 提供了 <thead>、<tbody>、<tfoot> 这三个元素，可以很方便地对表格的标题进行分组，使得表格数据更好地组织和展示。在使用这些元素时，需要注意选择合适的 HTML 标记，同时构造表格结构要符合 HTML 规范。