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>