科技有限公司网站建设策划书白云区做网站
表格是网页开发中最基础也最实用的元素之一，尽管现代前端开发中表格布局已被 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>