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

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、代码结果截图

猜你喜欢

转载自blog.csdn.net/qq_16645099/article/details/88086622
今日推荐