下面是一份适合做 《H5 前端开发笔记》第 09 期：HTML常用标签 (5) —— 表格标签 的学习笔记示例，结构清晰、适合发布或整理成文档。📒
【H5 前端开发笔记】第 09 期：HTML常用标签 (5) —— 表格标签
在网页开发中，表格（Table） 常用于展示 结构化数据，例如课程表、商品列表、财务报表等。
HTML 提供了一系列专门的表格标签来实现数据展示。
一、表格基本结构
HTML 表格由以下几个核心标签组成：
| 标签 | 作用 |
|---|---|
<table> | 定义表格 |
<tr> | 定义表格行（table row） |
<td> | 定义单元格（table data） |
<th> | 表头单元格 |
基本结构：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
页面效果：
单元格1 单元格2
单元格3 单元格4
二、表头标签 <th>
<th> 用于定义表格的 表头。
特点：
- 默认 加粗
- 默认 居中
示例：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>程序员</td>
</tr>
</table>
效果：
| 姓名 | 年龄 | 职业 |
|---|---|---|
| 张三 | 25 | 程序员 |
三、表格边框 border
可以使用 border 属性设置表格边框。
<table border="1">
示例：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
说明：
border="1"表示 1px 边框- 在现代开发中通常使用 CSS 控制样式
例如：
table{
border-collapse: collapse;
}
td,th{
border:1px solid #000;
}
四、单元格合并
HTML 表格支持 横向合并 和 纵向合并。
1 横向合并 colspan
colspan 表示 跨列合并。
示例：
<table border="1">
<tr>
<td colspan="2">合并两列</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
效果：
合并两列
A B
2 纵向合并 rowspan
rowspan 表示 跨行合并。
示例：
<table border="1">
<tr>
<td rowspan="2">合并两行</td>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
效果：
合并两行 A
B
五、完整表格示例
示例：学生成绩表
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>90</td>
<td>88</td>
<td>92</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
<td>91</td>
<td>87</td>
</tr>
</table>
效果：
| 姓名 | 语文 | 数学 | 英语 |
|---|---|---|---|
| 张三 | 90 | 88 | 92 |
| 李四 | 85 | 91 | 87 |
六、表格语义化标签（了解）
HTML5 推荐使用更 语义化结构：
| 标签 | 作用 |
|---|---|
<thead> | 表头 |
<tbody> | 表格主体 |
<tfoot> | 表格底部 |
示例：
<table border="1">
<thead>
<tr>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>手机</td>
<td>3999</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>3999</td>
</tr>
</tfoot>
</table>
优点：
- 结构更清晰
- 更利于 SEO
- 更方便 CSS / JS 控制
七、开发注意事项
1️⃣ 表格主要用于 展示数据
不要用表格做页面布局（旧时代做法）。
推荐使用：
divflexgrid
进行布局。
2️⃣ 表格样式推荐使用 CSS
不要大量使用 HTML 属性控制样式。
3️⃣ 大数据表格建议使用：
- 分页
- 虚拟滚动
- 表格组件库
例如：
- Element UI Table
- Ant Design Table
八、本期总结
表格核心标签：
| 标签 | 作用 |
|---|---|
<table> | 表格 |
<tr> | 行 |
<td> | 单元格 |
<th> | 表头 |
常用功能：
- 表格边框
- 行列合并
- 语义化结构
如果你需要，我还可以帮你整理一套 完整《H5前端开发笔记》系列目录（从HTML → CSS → JS → Vue），非常适合做 技术专栏 / 博客 / 知识付费课程。🚀
