您现在的位置是：网站首页 > 表头单元格(th)文章详情

表头单元格(th)

陈川【 HTML 】 3197人已围观 7049字

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

表头单元格<th>是HTML表格中用于定义表头单元格的标签。与普通单元格<td>不同，<th>元素默认会以加粗和居中的方式显示文本，表示这是表格的标题或分类信息。<th>元素必须包含在<tr>元素内，通常位于表格的第一行或第一列。

<table>
  <tr>
    <th>月份</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥5,000</td>
  </tr>
</table>

th与td的区别

<th>和<td>虽然都是表格单元格，但有几个关键区别：

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

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

th的作用域属性

<th>元素支持scope属性，用于明确表头与数据单元格的关系，这对可访问性特别重要：

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

<table>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">年龄</th>
  </tr>
  <tr>
    <th scope="row">张三</th>
    <td>25</td>
  </tr>
</table>

th的colspan和rowspan属性

与<td>类似，<th>也可以使用colspan和rowspan属性来合并单元格：

<table>
  <tr>
    <th colspan="2">2023年销售数据</th>
  </tr>
  <tr>
    <th>季度</th>
    <th>金额</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>¥120,000</td>
  </tr>
</table>

th的表头分组

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

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>项目A</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">总计: 1个项目</th>
    </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在响应式设计中的应用

在响应式设计中，<th>可以配合媒体查询改变显示方式：

<style>
  @media (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角色

为增强可访问性，可以为<th>添加ARIA角色：

<table role="grid">
  <tr>
    <th role="columnheader">日期</th>
    <th role="columnheader">温度</th>
  </tr>
  <tr>
    <td role="gridcell">2023-01-01</td>
    <td role="gridcell">25°C</td>
  </tr>
</table>

th在复杂表格中的应用

对于多级表头，可以嵌套使用<th>：

<table>
  <tr>
    <th rowspan="2">地区</th>
    <th colspan="2">销售数据</th>
  </tr>
  <tr>
    <th>数量</th>
    <th>金额</th>
  </tr>
  <tr>
    <td>华东</td>
    <td>120</td>
    <td>¥60,000</td>
  </tr>
</table>

th与表单元素的结合

<th>可以与表单元素结合创建可编辑表头：

<table>
  <tr>
    <th>
      <input type="text" value="产品名称" onchange="updateHeader(this)">
    </th>
    <th>
      <select onchange="updateHeader(this)">
        <option>价格</option>
        <option>成本</option>
      </select>
    </th>
  </tr>
  <tr>
    <td>笔记本电脑</td>
    <td>¥5999</td>
  </tr>
</table>

<script>
  function updateHeader(element) {
    element.parentNode.textContent = element.value;
  }
</script>

th的性能考虑

大量使用<th>的复杂表格可能影响性能，特别是当：

表格行数超过1000行
每个单元格包含复杂内容
需要频繁更新表格数据

在这种情况下，考虑使用虚拟滚动或其他优化技术：

// 虚拟滚动示例
const table = document.getElementById('large-table');
const tbody = table.querySelector('tbody');
const visibleRows = 20;
let startIndex = 0;

function renderVisibleRows() {
  tbody.innerHTML = '';
  for (let i = startIndex; i < startIndex + visibleRows; i++) {
    if (i >= data.length) break;
    const row = document.createElement('tr');
    // 添加单元格
    tbody.appendChild(row);
  }
}

table.addEventListener('scroll', () => {
  const scrollTop = table.scrollTop;
  startIndex = Math.floor(scrollTop / rowHeight);
  renderVisibleRows();
});

th在打印样式中的处理

为打印优化<th>样式：

<style>
  @media print {
    th {
      background-color: #fff !important;
      color: #000 !important;
      border: 1px solid #000 !important;
    }
    table {
      page-break-inside: avoid;
    }
  }
</style>

th与JavaScript交互

通过JavaScript动态操作<th>元素：

// 添加排序功能
document.querySelectorAll('th.sortable').forEach(th => {
  th.addEventListener('click', () => {
    const table = th.closest('table');
    const columnIndex = Array.from(th.parentNode.children).indexOf(th);
    const rows = Array.from(table.querySelectorAll('tbody tr'));
    
    rows.sort((a, b) => {
      const aText = a.children[columnIndex].textContent;
      const bText = b.children[columnIndex].textContent;
      return aText.localeCompare(bText);
    });
    
    const tbody = table.querySelector('tbody');
    tbody.innerHTML = '';
    rows.forEach(row => tbody.appendChild(row));
  });
});

th在数据可视化中的应用

结合<th>创建数据可视化效果：

<style>
  .progress-th {
    position: relative;
  }
  .progress-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #4CAF50;
  }
</style>

<table>
  <tr>
    <th class="progress-th">任务进度
      <div class="progress-bar" style="width: 75%"></div>
    </th>
    <th>负责人</th>
  </tr>
  <tr>
    <td>75%</td>
    <td>张三</td>
  </tr>
</table>

th的国际化和本地化

考虑<th>内容的国际化：

<table>
  <tr>
    <th data-i18n="date">日期</th>
    <th data-i18n="amount">金额</th>
  </tr>
</table>

<script>
  function localizeTable(lang) {
    document.querySelectorAll('[data-i18n]').forEach(el => {
      const key = el.getAttribute('data-i18n');
      el.textContent = translations[lang][key];
    });
  }
  
  const translations = {
    en: { date: 'Date', amount: 'Amount' },
    zh: { date: '日期', amount: '金额' }
  };
</script>

th的可访问性最佳实践

确保<th>元素对辅助技术友好：

始终使用scope属性
为复杂表头添加headers属性
避免使用空<th>元素
确保表头文本简洁明了
为视觉隐藏的表头添加适当的ARIA属性

<table>
  <tr>
    <th id="name" scope="col">姓名</th>
    <th id="email" scope="col">邮箱</th>
  </tr>
  <tr>
    <td headers="name">李四</td>
    <td headers="email">lisi@example.com</td>
  </tr>
</table>

th在框架中的使用

在现代前端框架中使用<th>：

React示例：

function DataTable({ columns, data }) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map(col => (
            <th key={col.key}>{col.title}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            {columns.map(col => (
              <td key={col.key}>{row[col.key]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Vue示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key">
          {{ col.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="col in columns" :key="col.key">
          {{ row[col.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

上一篇：表格标题(caption)

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