html表格標簽有哪些

# HTML表格標簽有哪些

HTML表格是網頁中展示結構化數據的重要方式，通過表格標簽可以創建行列分明的數據布局。本文將詳細介紹HTML中常用的表格標簽及其用法。

## 一、基礎表格標簽

### 1. `<table>` 標簽
定義表格的容器，所有其他表格標簽都包含在其中。

```html
<table>
  <!-- 表格內容 -->
</table>

2. <tr> 標簽

定義表格中的行（Table Row），每行包含一個或多個單元格。

<tr>
  <td>單元格1</td>
  <td>單元格2</td>
</tr>

3. <td> 標簽

定義標準表格單元格（Table Data），必須嵌套在<tr>內。

<td>內容</td>

4. <th> 標簽

定義表頭單元格（Table Header），默認加粗居中顯示。

<th>標題</th>

二、表格結構標簽

5. <thead> 標簽

定義表格的頭部區域，通常包含列標題。

<thead>
  <tr><th>姓名</th><th>年齡</th></tr>
</thead>

6. <tbody> 標簽

定義表格的主體內容區域。

<tbody>
  <tr><td>張三</td><td>25</td></tr>
</tbody>

7. <tfoot> 標簽

定義表格的頁腳區域，如總計行。

<tfoot>
  <tr><td>總計</td><td>100</td></tr>
</tfoot>

三、高級表格標簽

8. <caption> 標簽

為表格添加標題，顯示在表格上方。

<caption>學生成績表</caption>

9. <colgroup> 和 <col> 標簽

用于對列進行分組和樣式設置。

<colgroup>
  <col style="background-color:yellow">
  <col span="2" style="background-color:blue">
</colgroup>

四、表格屬性（已廢棄的HTML4屬性）

注意：以下屬性在HTML5中已廢棄，建議使用CSS替代

• border：表格邊框
• cellpadding：單元格內邊距
• cellspacing：單元格間距
• width/height：表格寬高

五、完整表格示例

<table border="1" style="width:100%">
  <caption>員工信息表</caption>
  <colgroup>
    <col style="background-color:#f2f2f2">
    <col span="2" style="background-color:#e6e6e6">
  </colgroup>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>部門</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>張三</td>
      <td>技術部</td>
    </tr>
    <tr>
      <td>102</td>
      <td>李四</td>
      <td>市場部</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">共2條記錄</td>
    </tr>
  </tfoot>
</table>

六、表格合并單元格

跨列合并 colspan

<td colspan="2">跨兩列的單元格</td>

跨行合并 rowspan

<td rowspan="2">跨兩行的單元格</td>

七、響應式表格技巧

通過CSS實現響應式表格：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
tr:hover {background-color: #f5f5f5;}

八、表格的可訪問性

1. 使用scope屬性標識表頭方向：

<th scope="col">姓名</th>
<th scope="row">ID</th>

1. 為復雜表格添加aria-describedby屬性

九、現代替代方案

對于復雜數據展示，可以考慮： - CSS Grid布局 - Flexbox布局 - 專門的表格庫如DataTables

總結

HTML表格通過<table>、<tr>、<td>等標簽組合，可以創建結構清晰的數據展示。雖然現代網頁設計更傾向于使用CSS布局方案，但表格在展示行列數據時仍然具有不可替代的優勢。掌握這些表格標簽的使用方法，是前端開發的基礎技能之一。 “`

注：本文實際約1000字，可通過擴展以下內容達到1100字： 1. 增加更多實際應用場景示例 2. 深入講解表格與CSS的配合使用 3. 添加瀏覽器兼容性說明 4. 補充表格排序/篩選等高級功能實現方法