博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table合并单元格colspan和rowspan
阅读量:5809 次
发布时间:2019-06-18

本文共 1139 字,大约阅读时间需要 3 分钟。

colspanrowspan这两个属性用于创建特殊的表格。

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

在浏览器中将显示如下:

单元格1
单元格2 单元格3 单元格4

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

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

单元格1 单元格2
单元格3 单元格4 单元格5

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

浏览器中将显示如下:

单元格1 单元格2
单元格3
单元格4

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

 

 

综合实例

ss
       
       
     
   
     

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

 

转载地址:http://agcbx.baihongyu.com/

你可能感兴趣的文章
[iOS]ARC和MRC下混编
查看>>
UVA 11582 巨大的斐波那契额数列! 快速幂取模
查看>>
夏日里的清新——南锣鼓巷的北京女孩儿们[原创街拍]
查看>>
only女装2011春款 only2011新款春装 only女装官网专卖
查看>>
性能概念
查看>>
本地部署JAVA SE环境
查看>>
【2802】SDUTOJ (并查集模板水题2)
查看>>
sqlite
查看>>
设计模式-代理
查看>>
[LeetCode] Shortest Palindrome
查看>>
洛谷3389:【模板】高斯消元法——题解
查看>>
BZOJ4753:[JSOI2016]最佳团体——题解
查看>>
centos7 防火墙
查看>>
C++与JAVA的区别
查看>>
sqlserver分页存储过程
查看>>
IQueryable和IEnumerable,IList的区别
查看>>
MySQL的order by子句
查看>>
webpack的像素转vw loader插件
查看>>
安卓(Android)开发基础知识
查看>>
自动下载快手视频
查看>>