HTML Academy · 课时

用于跨越单元格的 colspan 与 rowspan

Q: 「用于跨越单元格的 colspan 与 rowspan」这节课中我会学到什么？

跨列和跨行合并单元格。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

跨列和跨行合并单元格。

用于跨越单元格的 colspan 与 rowspan 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是单元格跨越？

默认情况下，每个表格单元格占据一行和一列。跨越允许单元格横跨多列或多行：

colspan——跨越多列
rowspan——跨越多行

跨列属性

colspan 属性可以让单元格跨越多列：

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

跨行属性

rowspan 属性可以让单元格跨越多行：

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

同时使用跨列和跨行

可以在同一个单元格上组合使用这两个属性：

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

处理跨越的单元格

当单元格跨越多列时，请在跨越的行中省略这些列：

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

常见的跨越模式

实际表格中的跨越示例：

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

使用跨行属性合并行表头

使用 rowspan 创建合并的行组标签：

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

跨列属性为 0——全宽单元格

colspan 值为 0 时，会跨越列组中所有剩余的列（很少使用）：

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

跨越与无障碍访问

复杂的跨列表格需要使用 scope 和 headers 属性，以便屏幕阅读器正确读取：

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

调试跨越问题

常见的跨越错误：

跨越后某一行中的单元格过多或过少
rowspan 超出了行数范围
跨越范围重叠（两个单元格声明了同一位置）

如果表格显示异常，请使用浏览器 DevTools 检查表格结构。

设置跨越单元格的 CSS 样式

为跨越多列或多行的单元格设置样式：

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

打印与单元格跨越

现代浏览器可以正确打印跨越的单元格。但是：

如果表头行跨越多列，它们会在每个打印页面上正确重复
表体中的 rowspan 不会跨分页符重复
发布前请在打印预览中测试复杂表格

快速检查

有一个表格单元格应该覆盖 3 列。应使用哪个属性？

回顾：跨列与跨行

单元格跨越要点：

colspan——单元格跨越多列
rowspan——单元格跨越多行
处理跨越的单元格：省略跨越范围覆盖的单元格
添加 scope="colgroup"，以支持跨列表头的无障碍访问
使用 DevTools 调试布局问题

常见问题解答

「用于跨越单元格的 colspan 与 rowspan」课时是免费的吗？

是的 — 「用于跨越单元格的 colspan 与 rowspan」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「用于跨越单元格的 colspan 与 rowspan」这节课中我会学到什么？

跨列和跨行合并单元格。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「用于跨越单元格的 colspan 与 rowspan」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy