HTML表单跨行跨列操作

最新推荐文章于 2024-07-12 00:07:26 发布

ginger_mr

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量531

点赞数 1

分类专栏： Html

本文链接：https://blog.csdn.net/qq_40332952/article/details/103797066

版权

Html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML表单跨行跨列操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单跨行跨列操作</title>
</head>
<body>
	<table border="1px" width="500px" height="300px" align="center" bgcolor="pink" cellspacing="0px" cellpadding="0px">
		<!--
			colspan:表单跨列操作
			rowspan:表单跨行操作
		  -->
		<tr>
			<!--横向跨列11,12  先注释12在到11添加属性colspan="2"  -->
			<td colspan="2">11</td>
			<!-- <td>12</td> -->
			<td>13</td>
			<td>14</td>
			<!--纵向跨行15,25 先注释25在到15添加属性rowspan="2" -->
			<td rowspan="2">15</td>
		</tr>
		<tr>
			<td>21</td>
			<!-- <td>22</td> -->
			<!--纵向跨行23,33 先注释33在到23添加属性rowspan="2" -->
			<!--纵向跨列23,22,33 先注释22,33在到23添加属性colspan="2" -->
			<td rowspan="2" colspan="2" align="center">23</td>
			<td>24</td>
			<!-- <td>25</td> -->
		</tr>
		<tr>
			<td>31</td>
			<!-- <td>32</td> -->
			<!-- <td>33</td> -->
			<td>34</td>
			<td>35</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
			<td>45</td>
		</tr>
	</table>
	
</body>
</html>

页面效果展示