合并单元格

合并单元格

在实际应用中,并非所有的表格都是规范的几行几列,有时候需要将某些单元格进行合并,以符合内容上的需要。在HTML中合并的方向有两种:上下合并和左右合并,只需设置 <td> 的两个属性即可。

1 用 colspan 属性合并左右单元格

col 是 column(列)的缩写,列的合并就是左右合并。

<td colspan="整数数值"></td>

整数表示合并的单元格数量,默认向右合并。合并后,每合并一个就应该删除原来右边的那个 <td>

2 用 rowspan 属性合并上下单元格

上下单元格合并需要为 <td> 标记增加 rowspan 属性。

<td rowspan="整数数值"></td>

rowspan 的值表示合并单元格数量,默认向下合并。一旦一个单元格合并了下面行的单元格,下面行中就要删掉对应的 <td>

本节代码

<!DOCTYPE html>
<html>
<head>
<title>标题栏</title>
</head>
<body>
<table>
<tr>
<td colspan="2">1 1.1</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
</tr>
<tr>
<td>2</td>
<td rowspan="2">2.1</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
</tr>
<tr>
<td>3</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
</tr>
<tr>
<td>4</td>
<td>4.1</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
</tr>
</table>
</body>
</html>

补充说明

  • colspanrowspan 的值必须是正整数,表示合并的单元格数目(包含自身)
  • 合并后,被占用的单元格对应的 <td> 必须从代码中删除,否则表格结构会错乱
  • 合并方向:colspan 向右合并,rowspan 向下合并,不能反向
  • 复杂表格可同时使用 colspanrowspan,但需注意行列对应关系,避免结构混乱

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注