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

最新推荐文章于 2023-10-31 22:09:03 发布

叫我邱球球

最新推荐文章于 2023-10-31 22:09:03 发布

阅读量1.3k

点赞数

分类专栏：有关HTML 文章标签： html 心得介绍前端 table标签的属性

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/53509725

版权

有关HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

列的合并（属性：colspan）

贴代码来演示一下：

先来做一个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！

叫我邱球球

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
NO.11 HTML之表格标签中最后一个知识点---行列合并

现在跟我一起学习一下行列的合并：列的合并（属性：colspan）贴代码来演示一下：先来做一个3行3列的细线表格： test 横向单元格的合并效果如图所示：合并第一行的左侧两个单元格：代码： test 横向单元格的合并 -->
复制链接

扫一扫