HTML表格如何合并单元格

在HTML5中,合并单元格通过rowspan和colspan属性实现，这两种属性可应用于<td>（数据单元格）或<th>（表头单元格）元素，以下是详细操作指南：

核心属性说明

1. colspan（跨列合并）

   • 作用：将水平方向的多个单元格合并为一个
   • 语法：<td colspan="合并的列数">内容</td>
   • 示例：colspan="2" 表示合并当前单元格及其右侧1个单元格（共占2列）

2. rowspan（跨行合并）

   • 作用：将垂直方向的多个单元格合并为一个
   • 语法：<td rowspan="合并的行数">内容</td>
   • 示例：rowspan="3" 表示合并当前单元格及其下方2个单元格（共占3行）

合并单元格操作步骤

场景1：跨列合并（colspan）

<table border="1">
  <tr>
    <th>姓名</th>
    <th colspan="2">联系方式</th> <!-- 合并右侧2列 -->
  </tr>
  <tr>
    <td>张三</td>
    <td>电话：123456</td>
    <td>邮箱：zhang@example.com</td>
  </tr>
</table>

效果：
| 姓名 | 联系方式（合并两列） |
|——|——————————-|
| 张三 | 电话：123456 | 邮箱：zhang@example.com |

场景2：跨行合并（rowspan）

<table border="1">
  <tr>
    <th>项目</th>
    <td rowspan="2">A</td> <!-- 合并下方2行 -->
  </tr>
  <tr>
    <th>进度</th>
    <!-- 此处省略被合并的单元格 -->
  </tr>
</table>

效果：
| 项目 | A（合并两行） |
|——|—————|
| 进度 | |

场景3：同时跨行+跨列

<table border="1">
  <tr>
    <td rowspan="2" colspan="2">合并2行2列</td>
    <td>B</td>
  </tr>
  <tr>
    <!-- 此处省略被合并的单元格 -->
    <td>C</td>
  </tr>
</table>

关键注意事项

1. 删除被合并的单元格
   合并后需手动删除被覆盖的单元格。

   • 若设置rowspan="2"，需删除下一行同位置的<td>

2. 表格结构一致性

   • 每行<tr>内的单元格总数需保持一致（合并后视觉上可能减少，但需通过占位符平衡）。

3. 可访问性优化

   • 表头用<th>并添加scope属性：

     <th scope="col">姓名</th> <!-- 表示列标题 -->
     <th scope="row">电话</th> <!-- 表示行标题 -->

   • 复杂表格使用headers和id关联单元格（提升屏幕阅读器体验）。

4. 响应式设计
   合并单元格可能导致小屏幕布局错乱，建议：

   • 使用CSS媒体查询调整表格显示方式（如转为块级元素）。
   • 避免过度合并,保持结构简单。

<table border="1">
  <tr>
    <th>部门</th>
    <th colspan="2">员工信息</th> <!-- 跨2列 -->
  </tr>
  <tr>
    <td rowspan="2">技术部</td> <!-- 跨2行 -->
    <td>张三</td>
    <td>工程师</td>
  </tr>
  <tr>
    <!-- 技术部合并，此行省略第一列 -->
    <td>李四</td>
    <td>设计师</td>
  </tr>
</table>