<th>-表头单元格

<th> 标签的基本定义

<th> 是 HTML 表格中的表头单元格标签，用于定义表格的标题行或标题列。与普通单元格 <td> 不同，<th> 默认具有加粗和居中的样式，语义上表示数据的分类或描述。它必须嵌套在 <tr> 内，常见于 <thead> 或 <tbody> 中。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

核心属性详解

scope 属性

定义表头的作用范围，可选值：

• row：标题作用于当前行
• col：标题作用于当前列
• rowgroup：标题跨多行
• colgroup：标题跨多列

<tr>
  <th scope="col">月份</th>
  <th scope="col">销售额</th>
</tr>
<tr>
  <th scope="row">一月</th>
  <td>¥10,000</td>
</tr>

colspan 和 rowspan

实现单元格合并：

<tr>
  <th colspan="2">年度统计</th>
</tr>
<tr>
  <th rowspan="2">季度</th>
  <th>Q1</th>
</tr>
<tr>
  <td>¥30,000</td>
</tr>

headers 属性

用于关联多个表头，提升可访问性：

<th id="name">姓名</th>
<th id="age">年龄</th>
<td headers="name age">李四 30</td>

样式控制技巧

基础样式覆盖

th {
  font-weight: normal;  /* 取消加粗 */
  text-align: left;     /* 左对齐 */
  background-color: #f2f2f2;
  padding: 12px;
}

响应式表格处理

@media (max-width: 600px) {
  th {
    display: block;
    width: 100%;
  }
}

高级应用场景

固定表头实现

table {
  height: 300px;
  overflow-y: auto;
  display: block;
}
thead th {
  position: sticky;
  top: 0;
  background: white;
}

排序功能集成

<th onclick="sortTable(0)">价格 
  <span class="sort-icon">↑↓</span>
</th>

<script>
function sortTable(column) {
  // 排序逻辑实现
}
</script>

无障碍最佳实践

屏幕阅读器优化

<caption>2023年销售数据</caption>
<thead>
  <tr>
    <th aria-sort="ascending">日期</th>
    <th>订单数</th>
  </tr>
</thead>

高对比度模式支持

@media (prefers-contrast: more) {
  th {
    border: 2px solid;
  }
}

与其他标签的配合

结合 <colgroup> 使用

<colgroup>
  <col span="2" style="background-color:red">
</colgroup>
<tr>
  <th>产品</th>
  <th>库存</th>
</tr>

表单元素嵌套

<th>
  <label>
    <input type="checkbox" id="select-all"> 全选
  </label>
</th>

浏览器兼容性注意事项

• IE8 及以下版本需要明确指定 DOCTYPE
• Safari 中 position: sticky 对 <th> 可能需要额外 z-index
• 移动端浏览器对 colspan 的渲染可能存在差异

<!-- 兼容IE的写法 -->
<!--[if lt IE 9]>
<style>
  th {
    display: table-cell;
  }
</style>
<![endif]-->

性能优化建议

• 避免超过 1000 个 <th> 单元格的巨型表格
• 使用 scope 属性替代部分 headers 以减少 HTML 体积
• 对固定表头采用 CSS transform 而非 JavaScript 计算

// 不佳的实现方式
window.addEventListener('scroll', function() {
  // 频繁计算表头位置
});

// 更优方案
thead {
  transform: translateZ(0);
}

实际案例演示

金融数据表格

<table class="financial">
  <thead>
    <tr>
      <th rowspan="2">证券代码</th>
      <th colspan="3">市场数据</th>
    </tr>
    <tr>
      <th>最新价</th>
      <th>涨跌幅</th>
      <th>成交量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>600000</td>
      <td>15.23</td>
      <td>+2.5%</td>
      <td>5.2万手</td>
    </tr>
  </tbody>
</table>

交互式课程表

<table class="timetable">
  <thead>
    <th>时间</th>
    <th>周一</th>
    <th>周二</th>
  </thead>
  <tbody>
    <tr>
      <th>9:00-10:30</th>
      <td contenteditable>数学</td>
      <td contenteditable>物理</td>
    </tr>
  </tbody>
</table>

<style>
  td[contenteditable]:focus {
    background-color: #fffde7;
  }
</style>