您的位置：首页 > Web前端 > HTML

NO.11 HTML之表格标签中最后一个知识点---行列合并

2016-12-07 20:29 441 查看

现在跟我一起学习一下行列的合并：

列的合并（属性：colspan）

<td colspan="2"></td> 

贴代码来演示一下：

先来做一个3行3列的细线表格：

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<table bgcolor="black" border="1px" width="300px" height="300px" align="center">
<caption>
横向单元格的合并
</caption>
<tr bgcolor="white">
<td ></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

效果如图所示：

合并第一行的左侧两个单元格：

代码：

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<table bgcolor="black" border="1px" width="300px" height="300px" align="center">
<caption>
横向单元格的合并
</caption>
<tr bgcolor="white">
<td colspan="2"></td>   <!--因为把这个单元格看成两个来处理，因此要再下边去掉一个单元格-->
<!-- <td></td> -->
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

效果如图所示：

纵向单元格的合并（属性 rowspan）：

同理创建一个3行3列的细线表格，在此就不贴代码了，和上面的一样。

然后合并第一二行的单元格。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<table bgcolor="black" border="1px" width="300px" height="300px" align="center">
<caption>
纵向单元格的合并
</caption>
<tr bgcolor="white">
<td rowspan="2"></td>    <!--因为把它看成第一行和第二行两个单元格，因此要把第二行的单元格去掉一个-->
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

单元格合并永远都只能向后或者向下合并

今天收获还蛮多的，要赶快努力，学习完HTML后学习CSS和JSP等其他技术！加油，Qiuqiuqiu！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 心得介绍前端 table标签的属性

相关文章推荐

新的分享

章节导航