HTML表格知识点汇总
编程小白也能看懂的HTML表格指南
什么是HTML表格？
HTML表格就像Excel表格一样，用来在网页上展示数据表格。它由行和列组成，可以显示各种数据，比如价格表、课程表、成绩单等。
简单说： 表格就是把信息整理成行和列，让数据看起来整齐有序。
表格的基本结构
一个最简单的HTML表格由三个基本标签组成：
<table>
表格容器
<tr>
表格行
<td>
表格单元格
基本结构代码示例：
<table> <!– 表格开始 –>
<tr> <!– 第一行开始 –>
<td>姓名</td> <!– 第一行第一个单元格 –>
<td>年龄</td> <!– 第一行第二个单元格 –>
</tr> <!– 第一行结束 –>
<tr> <!– 第二行开始 –>
<td>张三</td>
<td>25</td>
</tr> <!– 第二行结束 –>
</table> <!– 表格结束 –>
<tr> <!– 第一行开始 –>
<td>姓名</td> <!– 第一行第一个单元格 –>
<td>年龄</td> <!– 第一行第二个单元格 –>
</tr> <!– 第一行结束 –>
<tr> <!– 第二行开始 –>
<td>张三</td>
<td>25</td>
</tr> <!– 第二行结束 –>
</table> <!– 表格结束 –>
表格的表头单元格 <th>
<th> 标签用于定义表格的表头单元格（通常是第一行或第一列），浏览器默认会将其显示为粗体居中。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>北京</td>
</tr>
</table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>北京</td>
</tr>
</table>
| 姓名 | 年龄 | 城市 |
|---|---|---|
| 李四 | 30 | 北京 |
注意： <th> 和 <td> 用法完全一样，只是语义不同。<th> 表示标题，<td> 表示普通数据。
表格的标题 <caption>
<caption> 标签用来给整个表格添加一个标题，通常显示在表格上方。
<table>
<caption>学生信息表</caption> <!– 表格标题 –>
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>王五</td>
<td>95</td>
</tr>
</table>
<caption>学生信息表</caption> <!– 表格标题 –>
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>王五</td>
<td>95</td>
</tr>
</table>
<caption>
表格标题
表格分区：<thead>, <tbody>, <tfoot>
这些标签把表格分成几个逻辑部分：
- <thead> – 表格头部（通常包含列标题）
- <tbody> – 表格主体（包含主要数据）
- <tfoot> – 表格底部（通常包含总计、备注等）
<table>
<thead> <!– 表头开始 –>
<tr>
<th>产品</th>
<th>价格</th>
</tr>
</thead> <!– 表头结束 –>
<tbody> <!– 表体开始 –>
<tr>
<td>手机</td>
<td>¥3999</td>
</tr>
<tr>
<td>电脑</td>
<td>¥6999</td>
</tr>
</tbody> <!– 表体结束 –>
<tfoot> <!– 表脚开始 –>
<tr>
<td>总计</td>
<td>¥10998</td>
</tr>
</tfoot> <!– 表脚结束 –>
</table>
<thead> <!– 表头开始 –>
<tr>
<th>产品</th>
<th>价格</th>
</tr>
</thead> <!– 表头结束 –>
<tbody> <!– 表体开始 –>
<tr>
<td>手机</td>
<td>¥3999</td>
</tr>
<tr>
<td>电脑</td>
<td>¥6999</td>
</tr>
</tbody> <!– 表体结束 –>
<tfoot> <!– 表脚开始 –>
<tr>
<td>总计</td>
<td>¥10998</td>
</tr>
</tfoot> <!– 表脚结束 –>
</table>
为什么使用分区？ 分区可以让屏幕阅读器更好地理解表格结构，也方便用CSS给不同部分设置不同样式。
合并单元格
有时候我们需要合并多个单元格，有两种合并方式：
跨列合并 (colspan)
水平合并单元格
<td colspan=“2”>
合并两个单元格
</td>
合并两个单元格
</td>
跨行合并 (rowspan)
垂直合并单元格
<td rowspan=“3”>
合并三个单元格
</td>
合并三个单元格
</td>
完整示例：
<table>
<tr>
<td rowspan=“2”>合并两行</td>
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
<tr>
<td colspan=“2”>合并两列</td>
</tr>
</table>
<tr>
<td rowspan=“2”>合并两行</td>
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
<tr>
<td colspan=“2”>合并两列</td>
</tr>
</table>
重要提示： 合并单元格后，要删除被合并的单元格！比如你合并了2个单元格，那么这一行就少一个 <td> 或 <th>。
表格样式设置（CSS基础）
虽然HTML负责表格结构，但样式要用CSS来控制：
<!– 在style标签或CSS文件中添加 –>
table {
border-collapse: collapse; /* 合并边框 */
width: 100%; /* 表格宽度 */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 8px; /* 内边距 */
text-align: left; /* 文字对齐 */
}
th {
background-color: #f2f2f2; /* 表头背景色 */
}
tr:hover {
background-color: #f5f5f5; /* 鼠标悬停效果 */
}
table {
border-collapse: collapse; /* 合并边框 */
width: 100%; /* 表格宽度 */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 8px; /* 内边距 */
text-align: left; /* 文字对齐 */
}
th {
background-color: #f2f2f2; /* 表头背景色 */
}
tr:hover {
background-color: #f5f5f5; /* 鼠标悬停效果 */
}
CSS小技巧： 使用
border-collapse: collapse; 可以让表格边框变成单线边框，看起来更专业！
表格常用属性
虽然现在推荐使用CSS设置样式，但了解这些HTML属性也有帮助：
| 属性 | 作用 | 示例 |
|---|---|---|
| border | 设置表格边框宽度 | <table border=”1″> |
| width | 设置表格宽度 | <table width=”80%”> |
| cellspacing | 设置单元格之间的间距 | <table cellspacing=”5″> |
| cellpadding | 设置单元格内容与边框的距离 | <table cellpadding=”10″> |
| bgcolor | 设置背景颜色（不推荐） | <td bgcolor=”#f0f0f0″> |
现代做法： 这些属性在HTML5中已不推荐使用，建议使用CSS替代。例如用
border-collapse 替代 cellspacing。
HTML表格要点总结
- 基本结构： <table> 包含 <tr>，<tr> 包含 <td> 或 <th>
- 表头单元格： 用 <th> 代替 <td> 表示标题
- 表格标题： 用 <caption> 添加表格标题
- 分区组织： 用 <thead>、<tbody>、<tfoot> 组织表格结构
- 合并单元格： 用 colspan 和 rowspan 属性合并单元格
- 样式设置： 使用CSS而不是HTML属性设置表格样式
- 可访问性： 为表格添加标题和描述，方便屏幕阅读器用户理解
记住：表格是用来展示表格化数据的，不要用表格来布局整个网页！