table colspan rowspan-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_13425/article/details/82517065

列合并：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>