当前位置：首页 > 前端开发 > 正文

HTML表格如何合并行列？

admin
前端开发
2025-06-15
2356

使用HTML的` 标签创建表格，跨列通过colspan 属性实现，跨行通过rowspan 属性实现，在 或`中设置对应数值，合并相邻单元格，注意调整后续行列数量确保结构正确。

在HTML中创建跨行跨列表格需使用<table>标签结合rowspan（跨行）和colspan（跨列）属性,以下是详细实现方法：

核心属性说明

rowspan
- 定义单元格垂直跨越的行数
- 示例：<td rowspan="2"> 表示此单元格占2行高度
colspan
- 定义单元格水平跨越的列数
- 示例：<td colspan="3"> 表示此单元格占3列宽度

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #333; padding: 8px; text-align: center; }
    th { background-color: #f2f2f2; }
  </style>
</head>
<body>
<table>
  <!-- 表头行 -->
  <tr>
    <th>部门</th>
    <th colspan="2">员工信息</th> <!-- 跨2列 -->
    <th>入职年份</th>
  </tr>
  <!-- 数据行 -->
  <tr>
    <td rowspan="3">技术部</td> <!-- 跨3行 -->
    <td>张三</td>
    <td>工程师</td>
    <td>2020</td>
  </tr>
  <tr>
    <!-- 技术部单元格已跨行，此行不再重复 -->
    <td>李四</td>
    <td>设计师</td>
    <td rowspan="2">2021</td> <!-- 跨2行 -->
  </tr>
  <tr>
    <td>王五</td>
    <td>测试员</td>
  </tr>
  <tr>
    <td>市场部</td>
    <td colspan="2">赵六</td> <!-- 跨2列 -->
    <td>2022</td>
  </tr>
</table>
</body>
</html>

关键步骤解析

基础表格结构

HTML表格如何合并行列？第1张

<table>
  <tr> <!-- 行 -->
    <th>标题1</th> <!-- 表头单元格 -->
    <td>数据1</td> <!-- 标准单元格 -->
  </tr>
</table>

实现跨列（合并列）
在需要横向合并的单元格添加colspan，并删除被合并的单元格：

<tr>
  <td colspan="2">占2列宽度</td>
  <!-- 此行原本应有2个单元格，现在被合并为1个 -->
</tr>

实现跨行（合并行）
在需要纵向合并的单元格添加rowspan，并在下方行中删除对应位置的单元格：

<tr>
  <td rowspan="2">占2行高度</td>
  <td>其他数据</td>
</tr>
<tr>
  <!-- 此行原本应有2个单元格，但第一个已被上方合并 -->
  <td>新行数据</td>
</tr>

注意事项

结构一致性
- 每行<tr>内的单元格总数需保持一致（含跨行跨列占位）
- 示例错误：若表格共4列，某行只有3个<td>（未用colspan/rowspan补位）会导致布局错乱
样式优化建议
- 添加border-collapse: collapse;使边框合并为单线
- 使用CSS为表头（<th>）设置背景色增强可读性

响应式适配
在小屏幕设备添加滚动容器：

<div style="overflow-x:auto;">
  <table>...</table>
</div>

实际效果说明

上述代码将生成如下表格结构：
| 部门 | 员工信息（跨2列） | | 入职年份 |
|——–|——————|———-|—————-|
| 技术部（跨3行） | 张三 | 工程师 | 2020 |
| | 李四 | 设计师 | 2021（跨2行） |
| | 王五 | 测试员 | |
| 市场部 | 赵六（跨2列） | | 2022 |

HTML表格如何合并行列？第3张