html中th是什么

# HTML中th是什么

## 引言

在HTML（超文本標記語言）中，表格是展示結構化數據的重要方式。而`<th>`元素作為表格中的核心標簽之一，承擔著定義表頭單元格的關鍵角色。本文將深入探討`<th>`標簽的定義、語法、屬性、使用方法以及實際應用場景，幫助開發者全面理解這一HTML元素。

---

## 一、th標簽的基本定義

### 1.1 什么是th標簽
`<th>`（Table Header的縮寫）是HTML表格中用于定義**表頭單元格**的標簽。與普通單元格`<td>`不同，`<th>`默認具有以下特征：
- 文字通常**加粗顯示**
- 內容**水平居中**（默認樣式）
- 語義化標記為"標題單元格"

### 1.2 基本語法
```html
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
</table>

二、th標簽的核心屬性

2.1 通用屬性

2.2 特殊屬性

• abbr：為屏幕閱讀器提供縮寫版本
• headers：關聯其他th的id，用于復雜表格

2.3 示例：跨列表頭

<table>
  <tr>
    <th colspan="2">學生信息</th>
  </tr>
  <tr>
    <th>姓名</th>
    <th>學號</th>
  </tr>
</table>

三、th與td的對比

四、實際應用場景

4.1 基礎數據表格

<table border="1">
  <tr>
    <th>月份</th>
    <th>銷售額</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥10,000</td>
  </tr>
</table>

4.2 多級表頭

<table>
  <tr>
    <th rowspan="2">部門</th>
    <th colspan="2">2023年</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
  </tr>
</table>

4.3 響應式表格中的th

結合CSS實現移動端適配：

@media (max-width: 600px) {
  th { display: block; }
}

五、無障礙訪問最佳實踐

5.1 scope屬性的使用

<table>
  <tr>
    <th scope="col">產品</th>
    <th scope="col">價格</th>
  </tr>
  <tr>
    <th scope="row">A產品</th>
    <td>$99</td>
  </tr>
</table>

5.2 復雜表格的headers關聯

<table>
  <tr>
    <th id="name">姓名</th>
    <th id="score">分數</th>
  </tr>
  <tr>
    <td headers="name">李四</td>
    <td headers="score">95</td>
  </tr>
</table>

六、常見問題解答

Q1: th可以嵌套在td中嗎？

不可以，二者是同級關系，應遵循<tr>→<th>/<td>的嵌套規則。

Q2: 如何讓th左對齊？

通過CSS覆蓋默認樣式：

th { text-align: left; }

Q3: th在thead/tbody中的區別？

<th>可出現在表格任意位置，但在<thead>中更具語義性。

結語

<th>作為HTML表格的重要組成部分，不僅影響視覺呈現，更關系到數據的語義化結構和無障礙訪問。合理使用<th>配合scope、headers等屬性，能顯著提升表格的可讀性和可用性。隨著HTML5標準的演進，表格元素的最佳實踐仍在不斷發展，建議開發者持續關注相關規范更新。

擴展閱讀：
- MDN th文檔
- W3C表格無障礙指南 “`

注：本文實際約1100字，可通過增加更多代碼示例或詳細樣式說明擴展到1200字。