HTML表格怎么快速合并单元格教程

在HTML中合并表格行主要使用rowspan属性，它允许一个单元格垂直跨越多行，以下是详细操作方法及注意事项：

基础语法

<table border="1">
  <tr>
    <td rowspan="跨越行数">内容</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <!-- 被合并的位置留空 -->
    <td>下一行单元格</td>
  </tr>
</table>

操作步骤

1. 确定合并位置
   在需要合并的起始单元格添加rowspan属性，

   <td rowspan="3">合并3行</td>

2. 删除被合并的单元格
   在后续行中，删除被合并区域对应的空单元格，例如合并3行时：

   

   <tr>
     <td>第1行（含rowspan）</td>
   </tr>
   <tr>
     <!-- 这里原本应有单元格，因被合并而删除 -->
   </tr>
   <tr>
     <!-- 这里原本应有单元格，因被合并而删除 -->
   </tr>

完整示例

<table border="1" style="width: 100%; border-collapse: collapse;">
  <tr>
    <th>姓名</th>
    <th>科目</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>数学</td>
    <td>90</td>
  </tr>
  <tr>
    <!-- 张三的单元格已合并，此行仅保留两个单元格 -->
    <td>英语</td>
    <td>85</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>数学</td>
    <td>95</td>
  </tr>
</table>

效果：
| 姓名 | 科目 | 成绩 |
|——|——|——|
| 张三 | 数学 | 90 |
| | 英语 | 85 |
| 李四 | 数学 | 95 |

关键注意事项

1. 行数计算
   rowspan="N"表示合并当前行+后续(N-1)行，总占位N行。

   

2. 列对齐规则
   每行的单元格数量必须一致：

   <!-- 错误示例：第2行少一个单元格 -->
   <tr><td rowspan="2">A</td><td>B</td></tr>
   <tr><td>C</td></tr> <!-- 缺少一个单元格 -->

3. 复杂结构处理
   同时使用rowspan和colspan时，用注释标记被合并区域：

   

   <tr>
     <td rowspan="2" colspan="2">A</td>
     <td>B</td>
   </tr>
   <tr>
     <!-- 上方A单元格合并了2行2列 -->
     <td>C</td>
   </tr>

4. 响应式适配
   合并行可能导致移动端显示异常，建议：

   • 使用CSS媒体查询调整小屏幕布局
   • 复杂表格添加滚动容器：<div style="overflow-x:auto;">

常见问题解决

• 表格变形：检查每行单元格总数是否一致（包括被合并的隐形占位），错位**：确保rowspan后已删除对应位置的<td>
• 边框断裂：使用border-collapse: collapse统一边框。