表头单元格(th)

作者：陈川阅读数：54749人阅读分类： HTML

表头单元格(th)的基本概念

表头单元格<th>是HTML表格中用于定义表头单元格的标签。与普通单元格<td>不同，<th>默认具有加粗和居中的样式，语义上表示该单元格是表格的标题或分类信息。<th>通常出现在表格的第一行或第一列，用于标识每列或每行的数据类型。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>工程师</td>
  </tr>
</table>

th与td的区别

<th>和<td>虽然都是表格单元格，但存在几个关键差异：

语义差异：<th>表示表头信息，<td>表示普通数据
默认样式：<th>文本加粗居中，<td>文本常规左对齐
可访问性：屏幕阅读器会以不同方式处理这两种单元格

<table>
  <tr>
    <th>产品</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>手机</td>
    <td>¥3999</td>
    <td>120</td>
  </tr>
</table>

th的作用域属性

<th>元素支持scope属性，用于明确表头与数据单元格的关系：

scope="col"：表头适用于列
scope="row"：表头适用于行
scope="colgroup"：表头适用于列组
scope="rowgroup"：表头适用于行组

<table>
  <tr>
    <th scope="col">月份</th>
    <th scope="col">收入</th>
    <th scope="col">支出</th>
  </tr>
  <tr>
    <th scope="row">一月</th>
    <td>¥50,000</td>
    <td>¥30,000</td>
  </tr>
</table>

th的colspan和rowspan属性

与<td>类似，<th>也可以跨越多列或多行：

<table>
  <tr>
    <th colspan="2">学生信息</th>
    <th colspan="2">成绩</th>
  </tr>
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
  </tr>
</table>

th的表头分组

对于复杂表格，可以使用<thead>、<tbody>和<tfoot>分组表头：

<table>
  <thead>
    <tr>
      <th>日期</th>
      <th>销售额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2023-01-01</td>
      <td>¥12,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总计</th>
      <td>¥12,000</td>
    </tr>
  </tfoot>
</table>

th的样式定制

虽然<th>有默认样式，但可以通过CSS完全自定义：

<style>
  th {
    background-color: #f2f2f2;
    color: #333;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #ddd;
  }
</style>

<table>
  <tr>
    <th>城市</th>
    <th>人口</th>
  </tr>
  <tr>
    <td>北京</td>
    <td>2171万</td>
  </tr>
</table>

th在响应式设计中的应用

在小屏幕设备上，可以通过CSS改变<th>的显示方式：

<style>
  @media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    th {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    tr { border: 1px solid #ccc; }
    td {
      border: none;
      position: relative;
      padding-left: 50%;
    }
    td:before {
      position: absolute;
      left: 6px;
      content: attr(data-th);
      font-weight: bold;
    }
  }
</style>

th与ARIA角色

为增强可访问性，可以结合ARIA角色使用：

<table role="grid">
  <tr>
    <th role="columnheader">产品名称</th>
    <th role="columnheader">价格</th>
  </tr>
  <tr>
    <td role="gridcell">笔记本电脑</td>
    <td role="gridcell">¥5999</td>
  </tr>
</table>

th在复杂表格中的应用

对于多层表头的复杂表格：

<table>
  <thead>
    <tr>
      <th rowspan="2">年份</th>
      <th colspan="2">第一季度</th>
      <th colspan="2">第二季度</th>
    </tr>
    <tr>
      <th>收入</th>
      <th>利润</th>
      <th>收入</th>
      <th>利润</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2023</td>
      <td>¥100万</td>
      <td>¥20万</td>
      <td>¥120万</td>
      <td>¥30万</td>
    </tr>
  </tbody>
</table>

th与表单元素的结合

表头单元格也可以包含表单元素：

<table>
  <tr>
    <th>
      <input type="checkbox" id="selectAll">
      <label for="selectAll">全选</label>
    </th>
    <th>项目名称</th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>项目A</td>
  </tr>
</table>

th的性能考虑

大量使用<th>的复杂表格可能影响性能：

// 避免在大型表格中为每个<th>添加事件监听器
document.querySelector('table').addEventListener('click', function(e) {
  if(e.target.tagName === 'TH') {
    console.log('点击了表头:', e.target.textContent);
  }
});

th的国际化考虑

对于从右到左(RTL)语言，可能需要调整<th>样式：

<html dir="rtl">
<style>
  th {
    text-align: right;
  }
</style>
<table>
  <tr>
    <th>اسم</th>
    <th>عمر</th>
  </tr>
</table>
</html>

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：HTML文档类型声明

下一篇：单元格的合并(rowspan, colspan)

表头单元格(th)