编辑“︁HTML表格合并单元格”︁

{{DISPLAYTITLE:HTML表格合并单元格}}

'''HTML表格合并单元格'''是HTML表格布局中的重要技术，允许开发者通过跨行或跨列合并单元格来创建复杂的表格结构。本教程将详细介绍两种合并方式：'''跨列合并（colspan）'''和'''跨行合并（rowspan）'''，并提供实际应用示例。

== 基本概念 ==
在标准HTML表格中，每个单元格默认占据1行1列的空间。通过以下属性可以改变这一行为：
* <code>colspan="n"</code>：水平合并''n''个单元格
* <code>rowspan="n"</code>：垂直合并''n''个单元格

合并单元格时需注意：
* 被合并的相邻单元格需要从HTML代码中移除
* 合并操作会影响表格的列数和行数计算

== 跨列合并（colspan） ==
适用于需要将多个列合并为一个宽列的情况。

=== 基础语法 ===
<syntaxhighlight lang="html">
<td colspan="数字">内容</td>
</syntaxhighlight>

=== 示例 ===
创建跨3列的标题单元格：

<syntaxhighlight lang="html">
<table border="1">
  <tr>
    <th colspan="3">季度销售报告</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>Q2</td>
    <td>Q3</td>
  </tr>
</table>
</syntaxhighlight>

'''输出效果：'''
{| border="1"
| colspan="3" | '''季度销售报告'''
|-
| Q1 || Q2 || Q3
|}

== 跨行合并（rowspan） ==
适用于需要将多个行合并为一个高列的情况。

=== 基础语法 ===
<syntaxhighlight lang="html">
<td rowspan="数字">内容</td>
</syntaxhighlight>

=== 示例 ===
创建跨2行的侧边栏单元格：

<syntaxhighlight lang="html">
<table border="1">
  <tr>
    <td rowspan="2">产品分类</td>
    <td>电子设备</td>
  </tr>
  <tr>
    <td>办公用品</td>
  </tr>
</table>
</syntaxhighlight>

'''输出效果：'''
{| border="1"
| rowspan="2" | 产品分类
| 电子设备
|-
| 办公用品
|}

== 混合使用案例 ==
复杂表格通常需要同时使用两种合并方式。

=== 课程表示例 ===
<syntaxhighlight lang="html">
<table border="1">
  <tr>
    <th rowspan="2">时间</th>
    <th colspan="5">星期</th>
  </tr>
  <tr>
    <th>周一</th>
    <th>周二</th>
    <th>周三</th>
    <th>周四</th>
    <th>周五</th>
  </tr>
  <tr>
    <td>9:00-10:00</td>
    <td>数学</td>
    <td colspan="2">物理实验</td>
    <td>化学</td>
    <td rowspan="2">体育</td>
  </tr>
  <tr>
    <td>10:00-11:00</td>
    <td>英语</td>
    <td>历史</td>
    <td>地理</td>
    <td>生物</td>
  </tr>
</table>
</syntaxhighlight>

'''可视化结构：'''
<mermaid>
flowchart TD
    A[时间 rowspan=2] --> B[星期 colspan=5]
    B --> C[周一]
    B --> D[周二]
    B --> E[周三]
    B --> F[周四]
    B --> G[周五]
    H[9:00] --> I[数学]
    H --> J[物理实验 colspan=2]
    H --> K[化学]
    H --> L[体育 rowspan=2]
</mermaid>

== 注意事项 ==
* '''表格平衡'''：确保每行的列数一致（计算合并单元格的影响）
* '''可访问性'''：为复杂表格添加<code><caption></code>和<code>scope</code>属性
* '''响应式设计'''：合并单元格可能影响移动端显示，需配合CSS媒体查询

== 计算公式 ==
在包含合并单元格的表格中，列数计算需满足：
<math>
\sum_{i=1}^{n} (colspan_i) = \sum_{j=1}^{m} (colspan_j)
</math>
其中n和m代表不同行的单元格集合。

== 实际应用场景 ==
* 数据报表中的多级表头
* 产品比较表格中的共享特性单元格
* 日历应用中跨天的事件显示

通过掌握单元格合并技术，开发者可以创建更具表现力的数据展示界面，但同时需要注意保持代码的可维护性和可访问性。建议在复杂表格中添加注释说明合并结构。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]