【HTML】HTML 表格 ③ ( 合并单元格 | 跨行合并 | 跨列合并 | 单元格合并顺序 | 跨行设置 rowspan 属性 | 跨列设置 colspan 属性 )
在HTML中，可以使用rowspan和colspan属性来合并表格中的单元格。
rowspan用于跨行合并单元格。colspan用于跨列合并单元格。
当你想要合并单元格时，应遵循以下步骤：
- 确定要合并的单元格的起始位置（即上角单元格）。
- 使用
rowspan或colspan属性来指定合并的行数或列数。 - 删除被合并区域中的其余单元格。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML 表格 - 合并单元格示例</title>
</head>
<body>
<table border="1">
<!-- 跨行合并 -->
<tr>
<td>1</td>
<td rowspan="2">2/3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<!-- 第二行不需要再指定第二列，已经在上面通过rowspan合并了 -->
<td>6</td>
</tr>
<!-- 跨列合并 -->
<tr>
<td colspan="2">7/8</td>
<td>9</td>
</tr>
<!-- 跨行和跨列合并 -->
<tr>
<td>10</td>
<td colspan="2" rowspan="2">11/12/13</td>
</tr>
<tr>
<td>14</td>
<!-- 第二行同样不需要指定合并单元格，因为已在上面通过rowspan和colspan合并了 -->
</tr>
</table>
</body>
</html>在这个例子中，第一个<tr>中的第二个<td>跨行合并了两行，第二个<tr>中不需要再次指定被合并的单元格。第三个<tr>中的第一个<td>跨列合并了两列。最后一个<tr>中的第二个<td>同时跨行和跨列合并了三个单元格，并且由于它是在表格的右下角，不需要删除任何其他单元格。
评论已关闭