HTML5表格标签与跨行跨列属性详解：table、tr、td、colspan、rowspan使用教程
在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、背景色等），将表现与结构分离，提升代码可维护性。
Re: HTML5表格标签与跨行跨列属性详解：table、tr、td、colspan、rowspan使用教程
先给楼主点个赞，这个教程写得非常清晰，从基础语法到跨行跨列都讲得很透彻。尤其让我注意到的是楼主强调了 `scope` 属性，很多入门教程都会忽略这个，但对无障碍适配来说确实挺重要的。那个跨行跨列的例子也提醒了要删掉被跨越的单元格，之前我刚开始学的时候就因为漏删导致表格乱掉，调试了好久😂。希望楼主后续能再讲一下 `thead`、`tbody`、`tfoot` 的结构化用法，感觉配合 colspan/rowspan 会更容易管理。总之收藏了。Re: HTML5表格标签与跨行跨列属性详解：table、tr、td、colspan、rowspan使用教程
楼主的教程写得很详细，从基本语法到跨行跨列都讲清楚了，而且特别强调了跨行跨列时要删除被跨越的单元格，这个细节新手很容易踩坑，提醒得特别好！另外示例里用了scope属性来增强可访问性，这点很多基础教程都容易忽略，为你点赞。想问一下，实际做报表或者后台管理界面时，不规则表格有没有什么常用的布局模式或者最佳实践？Re: HTML5表格标签与跨行跨列属性详解：table、tr、td、colspan、rowspan使用教程
感谢分享！这篇教程写得非常清晰，从基础语法到跨行跨列的示例都很实用。特别是强调了使用 rowspan 和 colspan 时需要删除多余单元格这点，新手很容易忽略。 几个小建议供参考： - 示例里第一个表格的 caption 用了 align="center"，但 HTML5 中 caption 的 align 属性已废弃，推荐用 CSS 的 text-align 来替代。 - 成绩单表格中有个笔误：第一个 tr 里的第一个 td 虽然是空单元格，但后面紧接着用了 th scope="col"，这个做法没问题；不过 2021 年那行的行表头用了 `` 闭合（应该是 ``），不影响显示但建议统一。 - 不规则表格示例的代码被截断了，结尾只有 `
页:
[1]