html表格标签table单元格合并演示及行合并列合并的规律

最新推荐文章于 2024-06-12 13:03:03 发布

花开归矣

最新推荐文章于 2024-06-12 13:03:03 发布

阅读量6.5k

点赞数 5

分类专栏： html 文章标签： html表格标签table单元格合并

本文链接：https://blog.csdn.net/qq_16645099/article/details/88086622

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、规律

colspan : 跨列

在本行中进行单元格的删减
rowspan : 跨行

在其他行中进行单元格的删减

2、代码演示

<!DOCTYPE html>
<html>
	<head>
		<!-- 浏览器打开该页面时使用的编码 -->
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<!--
			表格单元格合并
				colspan :  跨列--在本行中进行单元格的删减
				rowspan :  跨行--在其他行中进行单元格的删减
		-->
		<table border="1px" cellspacing="0px" width="400px" align="center">
			<tr align="center">
				<td colspan="2">11</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr align="center">
				<td>21</td>
				<td colspan="2" rowspan="2">
					22
				</td>
				<td>24</td>
			</tr>
			<tr align="center">
				<td>31</td>
				<td>34</td>
			</tr>
			<tr align="center">
				<td>41</td>
				<td>42</td>
				<td>43</td>
				<td rowspan="2">44</td>
			</tr>
			<tr align="center">
				<td>51</td>
				<td>52</td>
				<td>53</td>
			</tr>
		</table>
	</body>
</html>

3、代码结果截图

花开归矣

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
html表格标签table单元格合并演示及行合并列合并的规律

1、规律colspan : 跨列在本行中进行单元格的删减rowspan : 跨行在其他行中进行单元格的删减2、代码演示&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;!-- 浏览器打开该页面时使用的编码 --&gt; &lt;meta charset="UTF-8"&gt; &lt;t...
复制链接

扫一扫