表格的分组(thead, tbody, tfoot)

表格是HTML中展示结构化数据的重要元素，而<thead>、<tbody>和<tfoot>这三个分组标签能够显著提升表格的可读性和语义化。合理使用它们可以优化渲染性能，并为CSS和JavaScript提供更精确的操作目标。

<thead>：定义表头内容

<thead>用于包裹表格的标题行（通常是第一行），包含<th>或<td>单元格。浏览器会优先渲染<thead>内容，即使数据未完全加载也能快速显示表头。

<table>
  <thead>
    <tr>
      <th>产品ID</th>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
</table>

特性说明：

• 一个表格只能有一个<thead>
• 默认具有display: table-header-group样式
• 打印时会在每页重复显示（需浏览器支持）

<tbody>：核心数据容器

<tbody>包含表格的主体数据，一个表格可以有多个<tbody>实现数据分段。当表格数据量很大时，分多个<tbody>可以优化渲染：

<table>
  <tbody>
    <tr><td>1001</td><td>手机</td><td>¥2999</td></tr>
    <tr><td>1002</td><td>笔记本</td><td>¥5999</td></tr>
  </tbody>
  <tbody>
    <tr><td>2001</td><td>耳机</td><td>¥399</td></tr>
  </tbody>
</table>

实际应用场景：

1. 大数据分块加载时动态插入新的<tbody>
2. 通过CSS为不同<tbody>设置交替背景色
3. 用JavaScript单独操作某个数据块

tbody:nth-child(odd) {
  background-color: #f5f5f5;
}

<tfoot>：表尾的特殊处理

<tfoot>用于放置汇总行或备注信息，在HTML结构中需放在<tbody>之前但显示在底部：

<table>
  <thead>...</thead>
  <tfoot>
    <tr>
      <td colspan="2">总计</td>
      <td>¥9397</td>
    </tr>
  </tfoot>
  <tbody>...</tbody>
</table>

注意事项：

• 必须使用colspan实现单元格合并
• 打印时可能出现在每页底部（浏览器依赖）
• 与<caption>标签的显示位置不同

分组标签的联合应用

完整示例展示三个标签的协同工作：

<table id="sales-report">
  <caption>2023年销售报表</caption>
  <thead>
    <tr>
      <th rowspan="2">季度</th>
      <th colspan="3">销售额（万元）</th>
    </tr>
    <tr>
      <th>线上</th>
      <th>线下</th>
      <th>合计</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>年度总计</th>
      <td>1,200</td>
      <td>800</td>
      <td>2,000</td>
    </tr>
  </tfoot>
  <tbody>
    <tr><td>Q1</td><td>250</td><td>150</td><td>400</td></tr>
    <tr><td>Q2</td><td>300</td><td>200</td><td>500</td></tr>
  </tbody>
  <tbody>
    <tr><td>Q3</td><td>350</td><td>250</td><td>600</td></tr>
    <tr><td>Q4</td><td>300</td><td>200</td><td>500</td></tr>
  </tbody>
</table>

动态操作分组元素

通过JavaScript可以精确控制不同分组：

// 获取最后一个tbody的最后一行
const lastRow = document.querySelector('tbody:last-of-type tr:last-child');

// 为表头添加排序功能
document.querySelector('thead').addEventListener('click', (e) => {
  if (e.target.tagName === 'TH') {
    sortTable(e.target.cellIndex);
  }
});

// 动态添加数据到tbody
function addData(items) {
  const tbody = document.createElement('tbody');
  items.forEach(item => {
    tbody.innerHTML += `
      <tr>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.price}</td>
      </tr>
    `;
  });
  document.querySelector('table').appendChild(tbody);
}

打印样式优化

针对打印场景的特殊样式处理：

@media print {
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { page-break-inside: avoid; }
}

无障碍访问建议

1. 为每个<th>设置scope属性：

   <th scope="col">价格</th>
   <th scope="row">Q1</th>
   

2. 复杂表头使用headers属性关联单元格：

   <td headers="quarter q1-sales">400</td>
   

3. 在<caption>中描述表格用途