合并单元格
在实际应用中,并非所有的表格都是规范的几行几列,有时候需要将某些单元格进行合并,以符合内容上的需要。在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>
补充说明
colspan和rowspan的值必须是正整数,表示合并的单元格数目(包含自身)- 合并后,被占用的单元格对应的
<td>必须从代码中删除,否则表格结构会错乱 - 合并方向:
colspan向右合并,rowspan向下合并,不能反向 - 复杂表格可同时使用
colspan和rowspan,但需注意行列对应关系,避免结构混乱