`

table colspan rowspan

    博客分类：
  • css
 
阅读更多

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

 

分享到：
| in_array php
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics