table合并单元格 colspan（跨列）和rowspan（跨行）

pyzheng

浏览: 3443675 次
性别:
来自: 珠海

最近访客更多访客>>

kopomimi

oszerone

lindow

leisure0422

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2016-06 ( 26)
2016-05 ( 32)
2016-04 ( 33)
更多存档...

博客分类：

前台&美工

http://blog.sina.com.cn/s/blog_6a0df991010128wk.html
colspan和rowspan这两个属性用于创建特殊的表格。

colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：

在浏览器中将显示如下：

该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“2”，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。

该例在浏览器中将显示如下：

rowspan的作用是指定单元格纵向跨越的行数。

浏览器中将显示如下：

上例中的单元格1，其rowspan被设为“3”，这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。

综合实例　

<html>
<head>
</head>
<table border= "1 "   width= "200 " >
     <tr>
        <td colspan="4"  >ss
        </td>
     </tr>
     <tr>
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td> 
     </tr>
     <tr>
        <td   width= "25% "rowspan="2"> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td> 
     </tr>
     <tr>
        <td   width= "25% "> 　 </td>  
        <td   width= "25% " rowspan="3"> 　 </td>  
        <td   width= "25% "> 　 </td> 
     </tr>
     <tr>
        <td   width= "25% " colspan="2"  > 　 </td>  
        <td   width= "25% "> 　 </td>  

     </tr>
     <tr>
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>  
        <td   width= "25% "> 　 </td>  
     </tr>
</table>
</html>