2.HTML表格详解：标签、属性与单元格合并实战
目录
一、表格基础标签
二、表格常用属性（推荐使用CSS替代）
三、表格标签基本使用 01 ——
标签实战
四、表格标签基本使用 02 —— 表格头部 + 表格主体 + 单元格合并
五、总结
在Web开发中，HTML表格是展示结构化数据的重要工具。本文将结合详细的图文教程，从基础标签到高级合并技巧，全面解析HTML表格的使用方法，确保你掌握每一个细节。
一、表格基础标签
HTML表格由一系列标签构成，每个标签都有明确的职责：
<table>标签：表示整个表格的容器。<tr>标签：表示表格中的一行（Table Row）。<td>标签：表示一个标准的数据单元格（Table Data）。<th>标签：表示一个表头单元格（Table Header），默认会居中加粗显示。<thead>标签：定义表格的头部区域，通常用于包裹标题行（<tr>containing<th>）。<tbody>标签：定义表格的主体区域，包含核心数据行。
✅正确的结构关系：
<table>包含<thead>,<tbody>,<tfoot>。
<thead>或<tbody>包含<tr>。
<tr>包含<th>或<td>。
为了更直观地理解，可以参考以下结构图：
<table> <thead> <!-- 表格头部 --> <tr> <!-- 第一行（标题行） --> <th>姓名</th> <!-- 标题单元格 --> <th>年龄</th> </tr> </thead> <tbody> <!-- 表格主体 --> <tr> <!-- 数据行 --> <td>张三</td> <!-- 数据单元格 --> <td>20</td> </tr> </tbody> </table>二、表格常用属性（推荐使用CSS替代）
虽然现代前端开发更推荐使用CSS来设置样式，但了解HTML原生属性仍有助于理解表格结构。这些属性需放在<table>标签内：
属性名 | 说明 |
|---|---|
| 表格相对于周围元素的对齐方式。 |
| 边框宽度。 |
| 单元格内容与边框的距离，默认1像素 |
| 单元格之间的距离，默认为2像素 |
| 设置表格整体尺寸 |
Alt+Shift+⬇️：快速复制代码到下一行
align控制的是表格整体的位置，与表格内容无关
三、表格标签基本使用 01 ——<table>标签实战
下面是一个完整的基础表格示例，包含姓名、性别、年龄三列：
</head> <body> <table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>男</td> <td>3</td> </tr> <tr> <td>李四</td> <td>男</td> <td>4</td> </tr> <tr> <td>王五</td> <td>女</td> <td>5</td> </tr> </body> </html>💡提示：
align控制的是表格整体的位置，与表格内部内容无关。
四、表格标签基本使用 02 —— 表格头部 + 表格主体 + 单元格合并
为了后续使用CSS设置样式更方便，我们通常会将表格结构分为<thead>和<tbody>。
完成如下需求：将左侧的表格的一些单元格进行合并：
</head> <body> <table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td rowspan="2">男</td> <td>3</td> </tr> <tr> <td>李四</td> <!-- <td>男</td> --> <td>4</td> </tr> <tr> <td colspan="2">王五/女</td> <!-- <td>女</td> --> <td>5</td> </tr> </tbody> </body> </html>💡注意：合并后，被合并的单元格在代码中需删除或注释掉，避免重复渲染。
五、总结
本文从最基础的表格标签讲起，逐步深入到结构划分、属性设置、单元格合并，配合完整代码示例和效果图，帮助你彻底掌握HTML表格的使用。无论是初学者还是需要复习的开发者，都能从中获得实用价值。