如何在 HTML 表格中实现跨行跨列合并单元格？完整教程与代码示例

背景与目标

场景描述与需求

在前端开发中，表格展示经常需要跨行跨列合并单元格，以实现汇总信息、分组标题或多维数据的整齐呈现。本文以 temperature=0.6 的设置为例，带来一个完整的教程与代码示例，帮助你快速掌握跨行跨列的实现方法。关注点包括清晰的行列结构、可访问性，以及在不同浏览器中的兼容性。核心目标是让你无需额外的 JavaScript 就能在 HTML 表格中实现稳定且可维护的合并效果。

此外，你将看到具体代码片段，其中包含 rowspan 与 colspan 的组合使用，帮助你在实际项目中直接复用。要点提示：理解合并只是视觉上的变化，语义和表头的关系仍然需要保持正确，以利于屏幕阅读器和搜索引擎理解表格数据。

 <!-- 说明：这是一个简单的合并示例，展示如何使用 rowspan 与 colspan -->
<table border="1" cellpadding="5" cellspacing="0" aria-label="简单合并示例表格"><thead><tr><th>日期</th><th>项目</th><th>阶段</th><th>状态</th></tr></thead><tbody><tr><td rowspan="2">2025-01-03</td><td>测试</td><td>阶段1</td><td>完成</td></tr><tr><td>测试</td><td>阶段2</td><td>进行中</td></tr></tbody>
</table>

基础知识：HTML 表格中的 rowspan 与 colspan

rowspan 的工作原理

在 HTML 表格中，rowspan 属性用于让一个单元格横跨多行，从而实现垂直方向的合并。正确使用时，下面的行会自动跳过被合并的单元格位置，确保表格结构保持一致。关键点是要在合并的起始单元格上设置 rowspan，并在紧随其后的行中留出对应的空位置。语义性也要注意，尽量把表头和数据对应清晰，以便屏幕阅读器理解表格层级。

下面的代码展示了一个简单的垂直合并示例：一个标题单元横跨两行，而其他单元保持普通结构。你可以将其直接复制到你的 HTML 页面中测试。核心要素是起始单元格设置 rowspan，并确保后续行中对齐列保持一致。

 <table border="1" cellpadding="5" cellspacing="0" aria-label="rowspan 示例"><tr><th>类别</th><th>描述</th><th>数值</th></tr><tr><td rowspan="2">传感器</td><td>温度</td><td>36.6</td></tr><tr><td>湿度</td><td>45%</td></tr>
</table>

colspan 的工作原理

colspan 属性用于让一个单元格横跨多列，从而实现水平方向的合并。当一个单元格跨越多列时，后续列数必须相应减少，以保持整张表的列数一致。要点是在需要跨越的单元格上设置 colspan，并确保同一行内的单元格数量与表头列数对齐。

以下示例演示了如何使用 colspan 将一个单元格横跨两列，常用于合并标题或汇总信息。请注意在同一行中要有足够的列来容纳 colspan 的范围。

 <table border="1" cellpadding="5" cellspacing="0" aria-label="colspan 示例"><tr><th>日期</th><th>事件</th><th colspan="2">统计信息</th></tr><tr><td>2025-01-01</td><td>启动</td><td>周</td><td>值</td></tr>
</table>

完整教程：从简单到复杂的合并实现

场景1：简单合并示例

在最基本的场景中，我们只需要一个单元格跨越两列，或一个单元格跨越两行。简单合并是入门级别的常见需求，适合初学者快速验证表格结构与样式。要点是确保总列数不被打乱，以及用合适的表头提升可读性。

下面给出一个简单的横向合并示例，演示如何让一个标题跨越两列来突出显示汇总信息。你只需将表头列数保持一致即可实现。实践要点：在目标单元格上加上 colspan="2"，并确保同一行只有恰好四列的结构。

 <table border="1" cellpadding="5" cellspacing="0" aria-label="简单合并表格"><thead><tr><th>日期</th><th>项目</th><th colspan="2">合并列</th></tr></thead><tbody><tr><td>2025-01-01</td><td>温控</td><td>状态</td><td>完成</td></tr></tbody>
</table>

实践中的注意点包括：尽量避免在同一行中出现多余空单元格、保持表头与数据行的列对齐，以及在需要时使用 scope 与 aria-label 提升可访问性。

场景2：跨行跨列的组合示例

在实际业务表格中，往往需要同时使用 rowspan 与 colspan，以呈现更丰富的布局。例如：一个顶部汇总单元跨越两列，下面的多行数据再通过 rowspan 展示类别信息。组合使用能实现更紧凑的信息呈现，但也增加了实现难度，因此需要对表格结构进行清晰规划。

下面给出一个综合示例：第一列使用 rowspan 将类别名字跨越两行，最后两列使用 colspan 实现一个合并的总计单元。该示例适合产品库存、销售报表等场景。重要点是先设计好总列数，再按需要分配 rowspan 与 colspan 的范围。

 <table border="1" cellpadding="5" cellspacing="0" aria-label="组合合并示例"><thead><tr><th>产品</th><th>月份</th><th>地区</th><th>销量</th></tr></thead><tbody><tr><td rowspan="2">产品A</td><td>1月</td><td>北区</td><td>120</td></tr><tr><td>2月</td><td>北区</td><td>135</td></tr><tr><td>产品B</td><td colspan="2">总计</td><td>260</td></tr></tbody>
</table>

可访问性与最佳实践

使用 scope 与 th 的关联

为了让屏幕阅读器正确解读表格结构，建议在表头使用 th 标签并结合 scope 属性来明确列头与行头的关系。通过给第一行表头设置 scope="col"，给第一列表头设置 scope="row"，能显著提升无障碍体验。可维护性也会因此提高，因为定位头部信息更直接。

此外，将数据单元格与表头进行明确关联，可以提升抓取与索引效果，对SEO也有积极影响。实现要点：在 th 标签中添加 scope，并尽量使用 aria-label 进行额外描述。

 <table border="1" cellpadding="5" cellspacing="0" aria-label="带 scope 的表格示例"><thead><tr><th scope="col">日期</th><th scope="col">事件</th><th scope="col">状态</th></tr></thead><tbody><tr><td>2025-01-01</td><td>启动</td><td>完成</td></tr></tbody>
</table>

响应式设计中的处理

在响应式布局中，尽量避免在关键数据列上过度依赖 colspan/rowspan，以免在小屏设备上导致滚动和错乱。解决方案通常包括：使用 CSS 媒体查询调整表格显示、在小屏上切换成卡片式展示、以及为隐藏列提供替代文本。可访问性优先的原则应贯穿实现过程。

 <!-- 响应式替代：在小屏幕上展示卡片，保留可访问性信息 -->
<style>@media (max-width: 600px) {table, thead, tbody, th, td, tr { display: block; }thead tr { position: absolute; top: -9999px; left: -9999px; }td { position: relative; padding-left: 50%; }td::before {content: attr(data-label);position: absolute;left: 6px;top: 6px;font-weight: bold;}}
</style>
<table border="1" cellpadding="5" cellspacing="0" aria-label="响应式表格"><thead><tr><th>日期事件状态

常见错误与排错

 <table border="1" cellpadding="5" cellspacing="0" aria-label="错误排错示例"><thead><tr><th>A</th><th>B</th><th>C</th></tr></thead><tbody><tr><td rowspan="2">1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td></tr></tbody>
</table>