HTML5表格标签与跨行跨列属性详解：table、tr、td、colspan、rowspan使用教程

脚本专家 · 发表于 1 小时前

在HTML5中，表格是组织数据展示的常用结构，核心由 <table>、<tr>、<td> 三个标签配合 <th>（表头）、<caption>（标题）构成。掌握其基础语法和不规则表格的跨行跨列技巧，能灵活应对各种布局需求。

<table border="边框宽度" width="表格宽度" height="表格高度" bordercolor="边框颜色" align="页面水平对齐" bgcolor="背景颜色">
<caption align="标题对齐方式">表格标题</caption>
<tr>
<th scope="col">列表头</th>
<th scope="col">列表头</th>
<th scope="col">列表头</th>
</tr>
<tr>
<th scope="row">行表头</th>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

复制代码

<b>关键属性说明：</b>
- border：表格边框粗细（像素）
- width / height：表格的整体尺寸
- align：表格相对于页面的水平对齐方式（left/center/right）
- bordercolor / bgcolor：边框颜色和背景色
- scope：定义表头关联范围，col 表示列头，row 表示行头，有助于辅助技术识别

<b>完整示例：成绩单表格</b>
运行代码可以生成一个展示教师、学生和总人数的统计表：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1" width="600" height="600" bordercolor="blue" align="center" bgcolor="#cccccc">
<caption align="center">成绩单</caption>
<tr align="center">
<td></td>
<th scope="col">教师人数</th>
<th scope="col">学生人数</th>
<th scope="col">总人数</th>
</tr>
<tr align="center">
<th scope="row">2021年</td>
<td>40</td>
<td>400</td>
<td>440</td>
</tr>
<tr align="center">
<th scope="row">2022年</th>
<td>100</td>
<td>1500</td>
<td>1600</td>
</tr>
<tr align="center">
<th scope="row">2023年</th>
<td>100</td>
<td>1500</td>
<td>1600</td>
</tr>
<tr align="center">
<th scope="row">2024年</th>
<td>200</td>
<td>4000</td>
<td>4200</td>
</tr>
</table>
</body>
</html>

复制代码

<b>不规则表格：跨行与跨列</b>
当需要合并单元格时，使用 colspan（跨列）和 rowspan（跨行）属性。注意被跨越的原始单元格必须从代码中删除，否则会多出单元格导致布局混乱。

- rowspan：在 <th> 或 <td> 中设置 rowspan="行数"，表示该单元格纵向跨越指定行数
- colspan：在 <th> 或 <td> 中设置 colspan="列数"，表示该单元格横向跨越指定列数

<b>不规则表格示例</b>
下面代码利用 colspan 和 rowspan 创建了合并的统计表，注意空白单元格需要删掉重复部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不规则表格</title>
</head>
<body>
<table border="1" width="400" height="200">
<tr>
<td></td>
<th scope="col">教师人数</th>
<th scope="col">学生人数</th>
<th scope="col">总人数</th>
</tr>
<tr>
<th scope="row">2021年</th>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<th scope="row">2022年</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">2023年</th>
<td colspan="2" rowspan="2"></td>
<td></td>
</tr>
<tr>
<th scope="row">2024年</th>
<td></td>
</tr>
</table>
</body>
</html>

复制代码

通过掌握 <table>、<tr>、<td>/<th> 的基础属性和 colspan/rowspan 的合并技巧，你可以快速搭建各种数据表格，适应从简单列表到复杂统计报表的开发需求。需要注意的是，在实际项目中尽量使用 CSS 控制样式（如 border、背景色等），将表现与结构分离，提升代码可维护性。

热心网友7 · 发表于 1 小时前

先给楼主点个赞，这个教程写得非常清晰，从基础语法到跨行跨列都讲得很透彻。尤其让我注意到的是楼主强调了 `scope` 属性，很多入门教程都会忽略这个，但对无障碍适配来说确实挺重要的。那个跨行跨列的例子也提醒了要删掉被跨越的单元格，之前我刚开始学的时候就因为漏删导致表格乱掉，调试了好久😂。希望楼主后续能再讲一下 `thead`、`tbody`、`tfoot` 的结构化用法，感觉配合 colspan/rowspan 会更容易管理。总之收藏了。

HTML5表格标签与跨行跨列属性详解：table、tr、td、colspan、rowspan使用教程

Re: HTML5表格标签与跨行跨列属性详解：table、tr、td、colspan、rowspan使用教程

浏览过的版块

指导单位

旗下站点

联系我们