如何在 HTML 表单中使用 colspan 和 rowspan 合并单元格？

在 HTML 表格（<table>）中，使用 colspan 和 rowspan 属性可以合并单元格：

1. 合并类型与应用
   • colspan: 用于横向合并（列合并），如 colspan="2" 表示合并相邻的两列单元格；通常在需要为表头或多个列创建统一显示域时使用。
   • rowspan: 用于纵向合并（行合并），如 rowspan="2" 表示合并相邻的两行单元格；常用于多行数据显示或复杂布局中。
2. 合并单元格操作步骤
   遵循 合并三步法：先确定合并类型，定位目标单元格，然后删除冗余单元格。
   1. 确定合并类型:
      • 如横向合并选 colspan，合并列数；纵向合并选 rowspan，合并行数。
   2. 定位目标单元格:
      • 对于 rowspan: 指定合并起始位置（遵循先上后下规则），在纵向顶端单元格添加 rowspan。例如合并两行的第一列单元格：

      <tr>
        <td rowspan="2">顶单元格</td>
        <td>其他内容</td>
      </tr>
      <tr>
        <!-- 删除重复单元格：如保留跨行目标单元格后，删除下一行的同位置 <td> -->
      </tr>
      

      • 对于 colspan: 在最左侧单元格添加 colspan。例如合并两列第一行表头单元格：

      <tr>
        <th colspan="2">合并标题</th>
      </tr>
      

   3. 删除冗余单元格: 由于新属性会覆盖多个单元格位置，手动移除重复的 <td> 或 <th> 标签，避免界面错乱。如不删除，浏览器会自动填补多余单元格导致显示异常。

   4. 结合使用（可选）: 可同时使用 colspan 和 rowspan 来复合成更复杂的表格布局。例如：

      <td colspan="3" rowspan="2">同时合并行和列</td>
      

3. 示例实战演练
   • 跨行合并 (rowspan)：假设第二行第一列需合并第三行第一列：

   <table>
     <tr>
       <td>内容 A</td>
     </tr>
     <tr>
       <td rowspan="2">新合并单元格</td> <!-- 第二步 -->
       <td>剩余第二单元格</td>
     </tr>
     <tr>
       <!-- 原第三行的第一列标签已移除（第三行起效位置无需 <td> 重复标签） -->
     </tr>
   </table>
   

   • 跨列合并 (colspan)：第一行两列合并为统一的标题单元格：

   <table>
     <tr>
       <th colspan="2">产品分类</th> <!-- 覆盖两列 -->
     </tr>
     <tr>
       <td>数量</td>
       <td>价格</td>
     </tr>
   </table>
   

注意事项:

• 数值设置：colspan 和 rowspan 属性值需整数，如设置为 2 指跨越的总单元数。
• 布局优化建议: 添加样式表对齐文本（如 valign="middle" 确保垂直居中）并清除多余的单元格提高可读性。
  上述方法广泛用于优化 HTML 表格展示和结构简化布局处理数据组别分类应用场合场景设置等。