7. HTML 表格基础

表格是网页开发中最基础也最实用的元素之一，尽管现代前端开发中表格布局已被 CSS 布局方案取代，但在展示结构化数据时，表格依然发挥着不可替代的作用。本文将基于提供的代码素材，系统讲解 HTML 表格的核心概念与实用技巧。

一、表格的基本结构

一个完整的 HTML 表格由以下部分组成：

<table>
  <thead>    <!-- 表头区域 -->
    <tr>     <!-- 表格行 -->
      <th>标题1</th>  <!-- 表头单元格 -->
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>    <!-- 表格主体 -->
    <tr>
      <td>数据1</td>  <!-- 表格单元格 -->
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot>    <!-- 表尾区域 -->
    <tr>
      <td>汇总1</td>
      <td>汇总2</td>
    </tr>
  </tfoot>
</table>

核心元素说明：

• <table>： 定义表格容器
• <tr> (Table Row)： 定义表格行
• <th> (Table Header)：定义表头单元格（默认加粗居中）
• <td> (Table Data)： 定义标准单元格

二、表格的基础属性

1. 边框与间距控制

<table border="1" cellpadding="10" cellspacing="5">
  <!-- 表格内容 -->
</table>

• border：设置边框宽度（已过时，推荐使用 CSS）
• cellpadding：单元格内容与边框的间距（推荐用 CSS padding 替代）
• cellspacing：单元格之间的间距（推荐用 CSS border-spacing 替代）

现代 CSS 替代方案：

table {
   
  border-collapse: collapse; /* 合并边框 */
}
td, th {
   
  border: 1px solid #ddd;
  padding: 10px; /* 替代 cellpadding */
}

2. 表格尺寸控制

<table width="80%" align="center">
  <!-- 表格内容 -->
</table>

• width：设置表格宽度（推荐用 CSS width 替代）
• align：设置对齐方式（已过时，推荐用 CSS margin: 0 auto 居中）

三、表格的高级特性

1. 单元格合并

• 跨行合并 (rowspan)

<tr>
  <td rowspan="2">合并两行</td> <!-- 占据两行高度 -->
  <td>普通单元格</td>
</tr>