单元格的合并
1.水平方向上的合并
2.垂直方向上的合并
如何实现单元格的合并呢？
我们之前例子"附注内容如何解决呢"？
下面我们运用td一个新属性就是：colspan
我们先设colspan="1"试一试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black" cellspacing="1px" width="870px" >
<caption><h2>今日小说排行榜</h2></caption>
<thead>
<tr bgcolor="white" >
<th>排行</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr bgcolor="white">
<td>第一名</td>
<td>《斗罗大陆》</td>
<td>上升</td>
<td>100000</td>
<td>100000</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
<tr bgcolor="white">
<td>第二名</td>
<td>《斗罗2》</td>
<td>上升</td>
<td>99999</td>
<td>99999</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
<tr bgcolor="white">
<td>第3名</td>
<td>《斗罗2》</td>
<td>上升</td>
<td>99998</td>
<td>99998</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
<tr bgcolor="white">
<td>第4名</td>
<td>《诛仙》</td>
<td>上升</td>
<td>99997</td>
<td>99997</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
</tbody>
<tfoot bgcolor="white">
<!--colspan="6"-->
<tr bgcolor="white"><td colspan="1">附注：</td></tr></tfoot>
</table>
</body>
</html>
运行结果如图所示：
设colspan="2"试一试
设colspan="3"试一试
设colspan="4"试一试
设colspan="5"试一试
设colspan="6"试一试
归纳结论：
结论一：由于把某一个单元格当做了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格才能正常显示。
结论二：一定要记住单元格合并永远都是向后或者向下合并，而不能向前或者向上合并。
垂直合并
类比思维训练：类比水平，只是单词不一样td中加入rowspan="2"，看看效果。（在td标签设置一个rowspan属性，来指定把某一个单元格当做多个单元格来看待"垂直方向"例如<td rowspan="2"></td>)
网友评论