相信你对表格不陌生吧，日常生活中经常需要和表格打交道，如学生的课程表、上班族的工时表、采购员的采购记录表等等。下图是一个用户表，该表包含了用户编码、姓名、年龄和性别信息，笔者将通过标注来指出表格中的组成部分：
如果我们将上面表格映射到 HTML 中表格，它们的对应关系如下：
整个表格 -> 对应 <table> 元素
表格头 -> 对应 <thead>元素，全称 table head
表格主体 -> 对应 <tbody> 元素，全称 table body
表格页脚 -> 对应 <tfoot>元素，全称 table foot
表格的一行 -> 对应 <tr> 元素，全称 table row
表格头的单元格 -> 对应 <th> 元素，全称 table header
表格非表头的单元格 -> 对应 <td> 元素，全称，table data
将上述对应关系整理后如下图：
简单示例：定义一个表格，该表格包含表头、表主体和表页脚，表格主体总共有两行数据，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<table>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>上海</td>
</tr>
</tbody>
<!-- 表格页脚（注意位置，仍会渲染在底部） -->
<tfoot>
<tr>
<td colspan="3">汇总：共2条人员数据</td>
</tr>
</tfoot>
</table>
</body>
</html>运行示例，效果如下图：
该元素用于包裹整个表格的所有内容，是表格的根容器，定义一个完整的二维表格。
注意，该子元素直接子元素只能是 <caption>（表格标题）、<thead>、<tbody>、<tfoot>、<tr>（无结构划分时可直接放）。不能直接嵌套 <td>、<th>，<td>、<th> 必须通过 <tr> 包裹。
table 元素的常用属性如下表：
| 属性名 | 取值 | 作用 |
|---|---|---|
| border | 非负整数（如1） | 给表格添加边框，边框宽度为对应像素 |
| width | 像素（如500）、百分比（如100%） | 设置表格宽度 |
| cellspacing | 非负整数（如0、5） | 设置单元格之间的间距（边框与边框之间的距离） |
| cellpadding | 非负整数（如8） | 设置单元格内容与单元格边框之间的内边距 |
| align | left/center/right | 表格在页面中的水平对齐方式 |
简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<table border="1" width="500" cellspacing="0" cellpadding="8" align="center">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>上海</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">汇总：共2条人员数据</td>
</tr>
</tfoot>
</table>
</body>
</html>运行示例，效果如下：
该元素定义表格的整体标题，用于说明表格的用途（如 “2025 年上半年员工成绩单”）。
该元素定义表格的头部，存放列标题等说明性内容。
该元素定义表格的主体，存放表格的核心业务数据。
注意，一个 <table> 可以有多个 <tbody>（用于分段展示数据，如按月份拆分报表，每个月份一个<tbody>），方便分组控制。
<table border="1" width="500" cellspacing="0" cellpadding="8" align="center">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>上海</td>
</tr>
</tbody>
<tbody>
<tr>
<td>王五</td>
<td>45</td>
<td>深圳</td>
</tr>
<tr>
<td>赵六</td>
<td>38</td>
<td>云南</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">汇总：共2条人员数据</td>
</tr>
</tfoot>
</table>该元素定义表格的页脚，存放数据汇总、备注等内容。
注意：无论 <tfoot> 写在 <table> 中的哪个位置（甚至在<thead>之前、<tbody>之前），浏览器都会自动将其渲染到表格的底部。
<table border="1" width="500" cellspacing="0" cellpadding="8" align="center">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<!-- 定义表格页脚 -->
<tfoot>
<tr>
<td colspan="3">汇总：共2条人员数据</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>上海</td>
</tr>
</tbody>
</table>该元素定义表格中的一行，是单元格（<td>/<th>）的直接容器。
属性如下：
| 属性名 | 取值 | 作用 |
|---|---|---|
| align | left/center/right/justify | 行内所有单元格内容的水平对齐方式 |
| valign | top/middle/bottom/baseline | 行内所有单元格内容的垂直对齐方式 |
| bgcolor | 十六进制色值（如#f0f0f0）、颜色名（如gray） | 行的背景色 |
该元素定义表格的表头，存放列名、行名等说明性内容，提升表格可读性。
一个 <th> 表示表格中的表头单元格，用于描述数据的含义（如 “姓名”“成绩”“日期”），对搜索引擎和屏幕阅读器更友好。
属性如下：
| 属性名 | 取值 | 作用 |
| scope | col/row/colgroup/rowgroup | 明确表头的作用范围，增强语义化 |
| abbr | 简短文本（如“总分”对应“本次考试总分数”） | 表头内容的缩写，屏幕阅读器会优先读取该值 |
注意：浏览器自带表头默认样式 ——文字居中对齐、字体加粗，可通过 CSS 覆盖。
该元素表示表格中的一个普通数据单元格，对应具体的数值、文本等数据。
注意，该元素可以嵌套任意 HTML 元素（如<div>、<span>、<a>、甚至另一个<table>），灵活展示复杂内容。
属性如下：
| 属性名 | 取值 | 作用 |
| colspan | 正整数（如2、3） | 跨列合并：合并同一行中相邻的N个列单元格 |
| rowspan | 正整数（如2、3） | 跨行合并：合并同一列中相邻的N个行单元格 |
注意，除了上面两个属性外，还支持 align、valign、bgcolor、width、height 属性。
下面通过一个完整的实例了解如何使用 <table> 元素，定一个美观的个人信息表格，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
/* ...省略样式... */
</style>
</head>
<body>
<table>
<!-- 表格标题：说明表格用途 -->
<caption>个人信息登记表</caption>
<!-- 表格头部：定义列标题 -->
<thead>
<tr>
<th scope="col" colspan="4">个人信息汇总表</th> <!-- 跨列合并4列，作为总表头 -->
</tr>
<tr>
<th scope="col">信息类别</th>
<th scope="col">具体项</th>
<th scope="col">详情内容</th>
<th scope="col">备注</th>
</tr>
</thead>
<!-- 表格页脚：汇总说明（无论书写位置，浏览器自动渲染在底部） -->
<tfoot>
<tr>
<td colspan="4">本表信息仅供个人展示使用，请勿用于商业用途 | 更新日期：2025年10月</td> <!-- 跨列合并4列 -->
</tr>
</tfoot>
<!-- 表格主体：核心个人信息数据 -->
<tbody>
<!-- 第一组：基本信息（跨行合并2行） -->
<tr>
<th rowspan="5" class="merge-center">基本信息</th> <!-- 跨行合并5行，对应5条基本信息 -->
<td>姓名</td>
<td>张三</td>
<td rowspan="5" class="merge-center">本人免冠照</td> <!-- 跨行合并5行，对应照片位置 -->
</tr>
<tr>
<td>性别</td>
<td>男</td>
</tr>
<tr>
<td>出生日期</td>
<td>1995-06-18</td>
</tr>
<tr>
<td>民族</td>
<td>汉</td>
</tr>
<tr>
<td>籍贯</td>
<td>江苏省·南京市</td>
</tr>
<!-- 第二组：联系方式（跨列合并演示） -->
<tr>
<th rowspan="3" class="merge-center">联系方式</th>
<td>手机号码</td>
<td>138****1234</td>
<td>常用联系方式</td>
</tr>
<tr>
<td>电子邮箱</td>
<td>zhangsan@example.com</td>
<td>工作/学习专用</td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="2">北京市朝阳区XX小区XX号楼XX单元（跨列合并2列展示完整地址）</td> <!-- 跨列合并2列 -->
</tr>
<!-- 第三组：技能特长（混合合并演示） -->
<tr>
<th rowspan="2" class="merge-center">技能特长</th>
<th scope="row" class="merge-center">专业技能</th>
<td>编程开发</td>
<td>HTML/CSS/JavaScript、Python</td>
</tr>
<tr>
<th scope="row" class="merge-center">综合能力</th>
<td colspan="2">团队协作、项目管理、英语口语流利（跨列合并2列）</td> <!-- 跨列合并2列 -->
</tr>
</tbody>
</table>
</body>
</html>运行示例，效果如下图：
注意，关于CSS相关知识将在CSS教程中进行详细介绍。
关于更多HTML相关知识请继续学习后续知识……
川公网安备51010802032098