<thead>-表头部分

<thead> 是 HTML 表格中用于定义表头部分的标签，通常包含表格的标题行或列。它必须作为 <table> 的直接子元素出现，并与 <tbody> 和 <tfoot> 配合使用，确保表格结构清晰且语义化。

<thead> 的基本语法

<thead> 的语法非常简单，只需包裹在 <table> 标签内，并包含一个或多个 <tr>（表格行）元素。例如：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>前端工程师</td>
    </tr>
  </tbody>
</table>

<thead> 的典型应用场景

<thead> 主要用于定义表格的标题行，通常包含 <th>（表头单元格）而非 <td>（数据单元格）。以下是一个更复杂的例子，展示多列表头：

<table>
  <thead>
    <tr>
      <th colspan="2">个人信息</th>
      <th colspan="3">联系方式</th>
    </tr>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>电话</th>
      <th>邮箱</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>13800138000</td>
      <td>lisi@example.com</td>
      <td>北京市</td>
    </tr>
  </tbody>
</table>

<thead> 与 CSS 样式结合

通过 CSS 可以单独为 <thead> 设置样式，例如固定表头、添加背景色或边框：

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  thead {
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
</style>

<thead> 的注意事项

1. 必须包含 <tr>：<thead> 不能直接包含 <th> 或 <td>，必须通过 <tr> 包裹。
2. 与 <tbody> 和 <tfoot> 的顺序：规范建议的顺序是 <thead> → <tfoot> → <tbody>，但浏览器会正确渲染无论顺序如何。
3. 打印时的重复表头：在打印长表格时，<thead> 的内容会在每一页顶部重复显示。

动态生成 <thead> 的 JavaScript 示例

以下是通过 JavaScript 动态生成带 <thead> 的表格代码：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const data = [
      { name: '王五', age: 28, job: '设计师' },
      { name: '赵六', age: 35, job: '产品经理' }
    ];
    
    const table = document.createElement('table');
    const thead = document.createElement('thead');
    thead.innerHTML = `
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
      </tr>
    `;
    
    const tbody = document.createElement('tbody');
    data.forEach(item => {
      tbody.innerHTML += `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.job}</td>
        </tr>
      `;
    });
    
    table.appendChild(thead);
    table.appendChild(tbody);
    document.body.appendChild(table);
  });
</script>

<thead> 在响应式设计中的处理

在小屏幕设备上，可以通过 CSS 将表格转换为卡片布局，同时保留 <thead> 的语义：

@media (max-width: 600px) {
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  table td {
    display: flex;
    justify-content: space-between;
  }
  table td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 1rem;
  }
}

对应的 HTML 需要为每个 <td> 添加 data-label 属性：

<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="产品">手机</td>
      <td data-label="价格">¥2999</td>
      <td data-label="库存">50</td>
    </tr>
  </tbody>
</table>

<thead> 的可访问性实践

为提升可访问性，建议：

• 为 <th> 添加 scope 属性（col 或 row）
• 使用 aria-label 描述复杂表头
• 确保表头与数据单元格的关联清晰

<table>
  <thead>
    <tr>
      <th scope="col" aria-label="学生姓名">姓名</th>
      <th scope="col" aria-label="数学成绩">数学</th>
      <th scope="col" aria-label="语文成绩">语文</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>90</td>
      <td>85</td>
    </tr>
  </tbody>
</table>