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

最新推荐文章于 2024-09-12 11:23:34 发布

不净之心

最新推荐文章于 2024-09-12 11:23:34 发布

阅读量2.4k

点赞数

分类专栏：前台&美工文章标签： java

本文链接：https://blog.csdn.net/pyzheng/article/details/84706539

版权

前台&美工专栏收录该内容

118 篇文章 1 订阅

订阅专栏

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

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

在浏览器中将显示如下：
[img]http://dl2.iteye.com/upload/attachment/0106/6860/3a3d9708-7d06-3fbd-986f-4c92aa6a342b.png[/img]

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

该例在浏览器中将显示如下：
[img]http://dl2.iteye.com/upload/attachment/0106/6862/ccded7ad-d68e-38d9-a083-664d7beff58d.png[/img]

[color=red][b]rowspan[/b]的作用是指定单元格纵向跨越的行数。[/color]

浏览器中将显示如下：
[img]http://dl2.iteye.com/upload/attachment/0106/6864/6e91e415-c911-37e4-b797-788a92b75b0b.png[/img]

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

综合实例　
[img]http://dl2.iteye.com/upload/attachment/0106/6866/b95c52ba-af95-3abe-a0f7-37b228adb3ac.png[/img]
　

<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>