# HTML table表单colspan和rowspan跨行和跨列元素详解

*Published:* 2024-09-27
*Author:* 飞翔001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年9月26日，已超过 180天没有更新



HTML中的table表单元素colspan和rowspan表示表格跨行或者跨列，colspan和rowspan用于将行或者列合并，码笔记分享 table表单colspan和rowspan详细用法：

table表单colspan和rowspan

colspan是跨列(合并列)，rowspan是跨行(合并行)，用于td和th标签中。

colspan

colspan是指跨列，colspan用来合并列，colspan=2的话就是合并两列。colspan用来指定table中单元格横向跨越的列数。

col：英文解释为“列”，span是跨度、范围的意思。

rowspan

rowspan是指跨行，rowspan用来合并行，rowspan=2的话就是合并两行。rowspan用来指定table中单元格纵向跨越的行数。

row：英文解释为“行”，span是跨度、范围的意思。

colspan和rowspan使用方法示例

table代码一行跨2列，右侧跨2行

```
<table border="1">
  <tr>
    <td colspan="2">aaa</td>
  </tr>
  <tr>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
</table>
// table一行跨2列
```

效果如下：

![](https://www.xarjtc.com/wp-content/uploads/2024/09/41a424e28061959.webp)

代码说明原理：HTML代码首先是一行一行的读，先读第1行，碰到了colspan="2"后，就会预先占2列的位置。然后读第2行，先读第1列，再读第2列。

table代码一列跨2行

```
<table border="1">
  <tr>
    <td>aaa</td>
    <td rowspan="2">bbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>
// table一列跨2行代码
```

效果如下：

![](https://www.xarjtc.com/wp-content/uploads/2024/09/a33ecdd44f19d81.webp)

代码说明原理：HTML代码一行一行到读，先读第1行第1列，读到第2列后，碰到rowspan="2"，预留2行的位置，然后再读第2行第1列。

table代码一行跨2列，左侧跨2行

```
<table>
  <tr>
    <td rowspan="2">aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>
// table一列跨2行
```

效果如下：

![](https://www.xarjtc.com/wp-content/uploads/2024/09/9f19deca043048d.webp)

跨行跨列复杂组合

```
<table border="1">
  <tr>
    <td rowspan="2">aaa</td>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
  <tr>
    <td>ddd</td>
    <td>eee</td>
  </tr>
  <tr>
    <td>fff</td>
    <td colspan="2">ggg</td>
  </tr>
</table>
// table跨多行多列复杂组合
```

效果如下：

![](https://www.xarjtc.com/wp-content/uploads/2024/09/6fb054333b9433f.webp)