table colspan rowspan

最新推荐文章于 2024-05-30 16:49:10 发布

iteye_13425

最新推荐文章于 2024-05-30 16:49:10 发布

阅读量92

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/iteye_13425/article/details/82517065

版权

css 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

列合并：tr里面有一个td，使用colspan占下几列，其余被占的列不存在td

11	12	13	14	15
21	22	占三列
占三列			34	35
41	占三列			45

行合并：tr里面有一个td，使用rowspan占下几行，其余被占的行不存在td

占3行	12	13	14	15
	22	23	占两行	25
	32	33	占两行	35
41	42	43	44	45

两者的区别：
colspan：在一个tr里，占多列的，被占的不存在时td；
rowspan：在多个tr里，被占的行少td

<!DOCTYPE html>
<html>
<header>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</header>
<body>
	<p>列合并：tr里面有一个td，使用colspan占下几列，其余被占的列不存在td</p>
	<table border="1">
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
			<td>15</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td colspan="3">占三列</td>

		</tr>

		<tr>
			<td colspan="3">占三列</td>
			<td>34</td>
			<td>35</td>

		</tr>

		<tr>
			<td>41</td>
			<td colspan="3">占三列</td>
			<td>45</td>

		</tr>

	</table>
	
	<p>行合并：tr里面有一个td，使用rowspan占下几行，其余被占的行不存在td</p>
	<table border="1">
		<tr>
			<td rowspan="3">占3行</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
			<td>15</td>
		</tr>
		<tr>
			<td>22</td>
			<td>23</td>
			<td rowspan="2">占两行</td>
			<td>25</td>

		</tr>

		<tr>
			<td>32</td>
			<td>33</td>
			<td>35</td>

		</tr>

		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
			<td>45</td>

		</tr>

	</table>
	
	<p>两者的区别：<br>colspan：在一个tr里，占多列的， 被占的不存在时td；<br>rowspan：在多个tr里，被占的行少td</p>
</body>

</html>