html中如何添加一個表頭

# HTML中如何添加一個表頭

## 1. 表頭的基礎概念

在HTML中，表頭（Table Header）是表格中用于標識列或行內容的標題單元格。表頭通常以加粗、居中的樣式顯示，與普通數據單元格區分開來，幫助用戶理解表格數據的組織結構。

表頭在HTML中主要通過`<th>`標簽實現，與普通單元格`<td>`標簽的主要區別在于：
- 語義化含義不同
- 默認樣式不同
- 可關聯性不同（表頭可與單元格建立關聯）

## 2. 基本表頭實現方法

### 2.1 最簡單的表頭結構

```html
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>28</td>
    <td>工程師</td>
  </tr>
</table>

2.2 表頭的跨列與跨行

表頭可以跨越多列或多行：

<!-- 跨列表頭 -->
<th colspan="2">個人信息</th>

<!-- 跨行表頭 -->
<th rowspan="3">季度數據</th>

3. 高級表頭技術

3.1 使用<thead>元素

為了更好的語義化和樣式控制，推薦使用<thead>包裹表頭：

<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>銷售額</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1月</td>
      <td>￥10,000</td>
    </tr>
  </tbody>
</table>

3.2 多級表頭實現

復雜表格可能需要多級表頭：

<thead>
  <tr>
    <th colspan="2">學生信息</th>
    <th colspan="3">成績</th>
  </tr>
  <tr>
    <th>學號</th>
    <th>姓名</th>
    <th>語文</th>
    <th>數學</th>
    <th>英語</th>
  </tr>
</thead>

3.3 響應式表頭方案

在移動端可以使用CSS轉換表頭顯示方式：

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  td:before {
    content: attr(data-th);
    font-weight: bold;
    display: inline-block;
    width: 120px;
  }
}

4. 表頭的可訪問性優化

4.1 使用scope屬性

<th scope="col">產品名稱</th>
<th scope="row">價格</th>

scope屬性有兩個主要值： - col：標識列標題 - row：標識行標題

4.2 關聯表頭與單元格

使用headers屬性建立復雜關聯：

<th id="name">姓名</th>
<td headers="name">李四</td>

4.3 ARIA角色增強

<th role="columnheader">日期</th>
<th role="rowheader">項目</th>

5. 表頭樣式設計

5.1 基礎樣式設置

th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: center;
  padding: 12px;
}

5.2 懸停效果

th:hover {
  background-color: #e6e6e6;
  cursor: pointer;
}

5.3 固定表頭實現

thead {
  position: sticky;
  top: 0;
  z-index: 100;
}

6. 表頭的交互功能

6.1 排序功能實現

document.querySelectorAll('th').forEach(th => {
  th.addEventListener('click', () => {
    const table = th.closest('table');
    const index = Array.from(th.parentNode.children).indexOf(th);
    const rows = Array.from(table.querySelectorAll('tbody tr'));
    
    rows.sort((a, b) => {
      const aText = a.children[index].textContent;
      const bText = b.children[index].textContent;
      return aText.localeCompare(bText);
    });
    
    table.querySelector('tbody').append(...rows);
  });
});

6.2 篩選功能集成

<th>
  部門
  <select onchange="filterTable(this)">
    <option value="">全部</option>
    <option value="技術">技術部</option>
  </select>
</th>

7. 常見問題與解決方案

7.1 表頭不對齊問題

解決方法： - 確保所有列都有表頭 - 使用table-layout: fixed - 顯式設置列寬

7.2 打印時表頭重復

@media print {
  thead {
    display: table-header-group;
  }
}

7.3 表頭換行處理

th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

8. 最佳實踐建議

1. 始終使用<thead>和<th>增強語義
2. 為復雜表格添加scope或headers屬性
3. 保持表頭樣式簡潔一致
4. 考慮移動端顯示方案
5. 為可排序表頭添加視覺指示器

結語

HTML表頭雖然看似簡單，但通過合理運用各種HTML特性和CSS樣式，可以創建出既美觀又功能強大的表格界面。掌握這些技巧將顯著提升你的前端開發能力和用戶體驗設計水平。 “`