<thead>-表头部分

<thead> 标签的基本定义

<thead> 是 HTML 表格结构中的核心标签之一，用于定义表格的表头部分。它必须作为 <table> 的直接子元素出现，通常与 <tbody> 和 <tfoot> 配合使用。这个标签本身不会改变表格的视觉呈现，但能为屏幕阅读器等辅助技术提供语义信息。

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

与相关标签的配合使用

与 <th> 的关联

<thead> 通常包含一个或多个 <tr> 元素，而这些行中一般使用 <th> 单元格而非普通的 <td>。<th> 默认具有加粗和居中的样式，同时会通过 scope 属性声明它们是列头(col)还是行头(row)。

<thead>
  <tr>
    <th scope="col">产品ID</th>
    <th scope="col">产品名称</th>
    <th scope="col">库存量</th>
  </tr>
</thead>

与 <tbody> 的分工

一个表格可以包含多个 <tbody> 区块，但通常只有一个 <thead>。当打印长表格时，浏览器会自动在每个页面顶部重复 <thead> 内容。

<table>
  <thead>
    <tr><th>时间</th><th>事件</th></tr>
  </thead>
  <tbody>
    <tr><td>09:00</td><td>会议</td></tr>
    <!-- 更多数据行... -->
  </tbody>
  <tbody>
    <tr><td>13:00</td><td>客户拜访</td></tr>
    <!-- 另一组相关数据 -->
  </tbody>
</table>

样式控制技巧

固定表头实现

通过 CSS 定位可以实现滚动表格时固定表头的效果。需要为表格容器设置固定高度和 overflow:auto，然后给 <thead> 添加 position:sticky。

<div class="table-container">
  <table>
    <thead>
      <tr><th>姓名</th><th>年龄</th></tr>
    </thead>
    <tbody>
      <!-- 30行数据 -->
    </tbody>
  </table>
</div>

<style>
.table-container {
  height: 300px;
  overflow: auto;
}
thead th {
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4);
}
</style>

斑马条纹样式

结合 :nth-child 选择器可以为表头和表体创建不同的条纹效果：

thead tr {
  background-color: #2c3e50;
  color: white;
}
tbody tr:nth-child(odd) {
  background-color: #f8f9fa;
}
tbody tr:nth-child(even) {
  background-color: #e9ecef;
}

高级应用场景

动态表头生成

通过 JavaScript 可以动态创建包含复杂结构的表头。以下示例添加了带有排序图标的可点击表头：

<table id="sortable-table">
  <thead>
    <!-- 通过JS动态生成 -->
  </thead>
  <tbody>...</tbody>
</table>

<script>
const headers = [
  { name: '日期', sortable: true },
  { name: '订单号', sortable: false },
  { name: '金额', sortable: true }
];

const thead = document.querySelector('#sortable-table thead');
const row = document.createElement('tr');

headers.forEach(header => {
  const th = document.createElement('th');
  th.textContent = header.name;
  if (header.sortable) {
    th.innerHTML += `<span class="sort-icon">↕</span>`;
    th.style.cursor = 'pointer';
    th.addEventListener('click', () => sortTable(header.name));
  }
  row.appendChild(th);
});

thead.appendChild(row);
</script>

响应式表格处理

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

@media (max-width: 600px) {
  table, thead, tbody, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr { 
    border: 1px solid #ddd;
    margin-bottom: 1rem;
  }
  td {
    display: flex;
  }
  td::before {
    content: attr(data-label);
    font-weight: bold;
    width: 120px;
    flex-shrink: 0;
  }
}

可访问性最佳实践

关联数据单元格

使用 headers 属性建立 <td> 与 <th> 的明确关联，这对屏幕阅读器用户尤为重要：

<table>
  <thead>
    <tr>
      <th id="product">产品</th>
      <th id="qty">数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="product">无线鼠标</td>
      <td headers="qty">150</td>
    </tr>
  </tbody>
</table>

多层级表头处理

对于复杂表头结构，需要正确使用 colspan 和 rowspan 并配合 scope 属性：

<thead>
  <tr>
    <th colspan="2" scope="colgroup">基本信息</th>
    <th colspan="3" scope="colgroup">财务数据</th>
  </tr>
  <tr>
    <th scope="col">ID</th>
    <th scope="col">名称</th>
    <th scope="col">收入</th>
    <th scope="col">支出</th>
    <th scope="col">利润</th>
  </tr>
</thead>

与框架的集成示例

React 中的动态表头

在 React 组件中动态生成带有交互功能的表头：

function DataTable({ columns, data }) {
  const [sortConfig, setSortConfig] = useState(null);

  const requestSort = (key) => {
    let direction = 'ascending';
    if (sortConfig && sortConfig.key === key) {
      direction = sortConfig.direction === 'ascending' ? 'descending' : 'ascending';
    }
    setSortConfig({ key, direction });
  };

  return (
    <table>
      <thead>
        <tr>
          {columns.map((column) => (
            <th 
              key={column.key}
              onClick={() => column.sortable && requestSort(column.key)}
              style={{ cursor: column.sortable ? 'pointer' : 'default' }}
            >
              {column.title}
              {sortConfig?.key === column.key && (
                <span>{sortConfig.direction === 'ascending' ? ' ↑' : ' ↓'}</span>
              )}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {/* 渲染排序后的数据行 */}
      </tbody>
    </table>
  );
}

Vue 的表头插槽

使用 Vue 的插槽机制创建可定制的表头组件：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">
          <slot name="header" :column="column">
            {{ column.title }}
          </slot>
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 数据行 -->
    </tbody>
  </table>
</template>

<script>
export default {
  props: ['columns', 'data']
}
</script>

性能优化考量

大型表格的渲染

当处理数千行数据时，可以采用虚拟滚动技术，但需要保持 <thead> 静态：

function renderVisibleRows() {
  const startIndex = Math.floor(scrollTop / rowHeight);
  const endIndex = Math.min(startIndex + visibleRows, data.length);
  
  return (
    <table>
      <thead>
        <tr><th>ID</th><th>内容</th></tr>
      </thead>
      <tbody style={{ height: `${data.length * rowHeight}px` }}>
        {data.slice(startIndex, endIndex).map((row, index) => (
          <tr 
            key={row.id}
            style={{ 
              position: 'absolute',
              top: `${(startIndex + index) * rowHeight}px`
            }}
          >
            <td>{row.id}</td>
            <td>{row.content}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

表头与列宽同步

确保表头单元格与数据单元格的宽度保持一致：

function syncColumnWidths() {
  const table = document.getElementById('data-table');
  const headerCells = table.querySelectorAll('thead th');
  const firstRowCells = table.querySelectorAll('tbody tr:first-child td');
  
  firstRowCells.forEach((cell, index) => {
    if (headerCells[index]) {
      headerCells[index].style.width = `${cell.offsetWidth}px`;
    }
  });
}

// 在窗口大小变化和表格更新时调用
window.addEventListener('resize', syncColumnWidths);