目录
[三、表格标签基本使用 01 ------](#三、表格标签基本使用 01 ——)
[四、表格标签基本使用 02 ------ 表格头部 + 表格主体 + 单元格合并](#四、表格标签基本使用 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>。
为了更直观地理解，可以参考以下结构图：
html
<table>
<thead> <!-- 表格头部 -->
<tr> <!-- 第一行（标题行） -->
<th>姓名</th> <!-- 标题单元格 -->
<th>年龄</th>
</tr>
</thead>
<tbody> <!-- 表格主体 -->
<tr> <!-- 数据行 -->
<td>张三</td> <!-- 数据单元格 -->
<td>20</td>
</tr>
</tbody>
</table>二、表格常用属性（推荐使用CSS替代）
虽然现代前端开发更推荐使用CSS来设置样式，但了解HTML原生属性仍有助于理解表格结构。这些属性需放在++<table>++标签内：
| 属性名 | 说明 |
|---|---|
align |
表格相对于周围元素的对齐方式。align="center"表示居中（非内部元素对齐） |
border |
边框宽度。1表示有边框，数字越大越粗，""表示无边框 |
cellpadding |
单元格内容与边框的距离，默认1像素 |
cellspacing |
单元格之间的距离，默认为2像素 |
width/ height |
设置表格整体尺寸 |
Alt+Shift+⬇️：快速复制代码到下一行
align控制的是表格整体的位置，与表格内容无关
三、表格标签基本使用 01 ------ <table>标签实战
下面是一个完整的基础表格示例，包含姓名、性别、年龄三列：
html
</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>。
完成如下需求：将左侧的表格的一些单元格进行合并：
html
</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表格的使用。无论是初学者还是需要复习的开发者，都能从中获得实用价值。