HTML <th> 标签介绍

<th> 标签是HTML中用于定义表格表头单元格的标签，它必须包含在 <tr> 标签内，用于标识表格列或行的标题。

基本语法

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

标签特性

使用实例

1. 基本表格表头

2. 行表头和列表头组合

th 标签属性（HTML4，现在建议使用CSS）

行列合并实例

列合并表头（colspan）

行合并表头（rowspan）

行列同时合并

可访问性属性详解

scope 属性

可访问性示例

复杂表格结构实例

thead、tbody、tfoot 中的 th

th 与 td 的区别

abbr 属性应用

JavaScript 操作 th 示例

// 获取所有th元素
var headers = document.querySelectorAll("th");

// 为th添加排序功能
headers.forEach(function(header, index) {
  header.addEventListener("click", function() {
    sortTable(index);
  });
  header.style.cursor = "pointer";
});

// 排序函数示例
function sortTable(columnIndex) {
  var table = document.getElementById("dataTable");
  // 排序逻辑...
}

常见错误用法

CSS样式示例（仅作展示）

/* 基本表头样式 */
th {
  padding: 12px 15px;
  border: 1px solid #ddd;
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  text-align: left;
}

/* 斑马纹表格的表头 */
thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 悬停效果 */
th:hover {
  background-color: #45a049;
}

/* 响应式表格 */
@media screen and (max-width: 600px) {
  th {
    display: block;
    width: 100%;
  }
}

最佳实践

• 为每个表格使用适当的表头（th）
• 使用scope属性提高可访问性
• 为复杂的表格使用headers属性
• 避免空的th单元格，或使用 填充
• 在thead中使用th定义列标题
• 在tbody中使用th定义行标题（如果需要）
• 使用abbr属性为长表头提供简短描述

响应式表格设计

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
      <th>库存</th>
      <th class="mobile-hide">描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="产品名称">笔记本电脑</td>
      <td data-label="价格">¥5,999</td>
      <td data-label="库存">50</td>
      <td class="mobile-hide" data-label="描述">高性能商务本</td>
    </tr>
  </tbody>
</table>

<th> 标签是创建语义化、可访问性良好的表格的关键元素。正确使用th不仅能够改善表格的外观，还能大大提高屏幕阅读器用户的使用体验。