HTML 表格中的行合并与列合并

colspan是横向合并;rowspan是纵向合并。

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://www.mzph.cn/news/247775.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java快速排序

package com.atguigu.java;/*** 快速排序* 通过一趟排序将待排序记录分割成独立的两部分&#xff0c;其中一部分记录的关键字均比另一部分关键字小&#xff0c;* 则分别对这两部分继续进行排序&#xff0c;直到整个序列有序。*/ public class QuickSort {private static void s…

网址备份

1.jstl标签库http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/2.tomcat服务器http://tomcat.apache.org/3.mysql架包https://mvnrepository.com/4.jqueryhttps://github.com/jquery/jquery/releases5.图标http://icons8.com/preloaders6.jquery-formhttp://…

前端开发-热更新原理解读

- 一、websocket简介- 二、热跟新原理- 三、实例剖析- 四、总结websocket简介 在h5推出之前&#xff0c;浏览器应用跟服务器端通信的机制只有http协议&#xff0c;http是一种无状态的网络协议&#xff0c;前端向服务器发起一个请求&#xff0c;服务器给出一次应答&#xff…

java杨辉三角

package com.atguigu.exer; /** 使用二维数组打印一个 10 行杨辉三角。【提示】1. 第一行有 1 个元素, 第 n 行有 n 个元素2. 每一行的第一个元素和最后一个元素都是 13. 从第三行开始, 对于非第一个元素和最后一个元素的元素。即&#xff1a; yanghui[i][j] yanghui[i-1][j-1…

这65条工作和成长建议,你将受用终生!

这65条工作和成长建议&#xff0c;每一条都值得我们认真思考。希望对你有启发。 从1990年进入格力&#xff0c;董明珠已经工作了近30年。 她花了近30年的时间&#xff0c;一手把格力从一家亏损的中小企业变成全球500强&#xff0c;年销售额超过1400亿。 2004年&#xff0c;她被…

HTML5事件—visibilitychange 页面可见性改变事件

又看到一个很有意思的HTML5事件 visibilitychange事件是浏览器新添加的一个事件&#xff0c;当浏览器的某个标签页切换到后台&#xff0c;或从后台切换到前台时就会触发该消息&#xff0c;现在主流的浏览器都支持该消息了&#xff0c;例如Chrome, Firefox, IE10等。虽然这只是一…

java回型数

import java.util.Arrays;public class hello {public static void main(String[] args) {//输出5*5的int n 5;int [][] huizixingnew int[n][n];int minX0;//x轴最小下标int minY0;//y轴最小下标int maxXn-1;//x轴最大下标int maxYn-1;//y轴最大下标int counter0;//计数int xf…

用CSS3 vh 简单实现DIV全屏居中

vh、vw、vmin、vmax介绍 vw&#xff1a;视窗宽度的百分比&#xff08;1vw 代表视窗的宽度为 1%&#xff09;vh&#xff1a;视窗高度的百分比vmin&#xff1a;当前 vw 和 vh 中较小的一个值vmax&#xff1a;当前 vw 和 vh 中较大的一个值 浏览器兼容性 &#xff08;1&#xff09…

解决360等等浏览器兼容模式解析不兼容代码

之前写的代码不是很规范 , 在今天测试下发现360浏览器等等的浏览器使用兼容模式会有很多不兼容 , 网上了解过一下 , 说是很多浏览器的兼容模式可能就是为了兼容IE7之前的网站代码 , 而非我们字面理解的兼容二字 ... OK!跑题了 ... 我的解决方案是在页面head加<meta http…

java自定义异常报错

public class TeamException extends Exception{static final long serialVersionUID -3387516993124229948L;public TeamException() {super();}public TeamException(String message) {super(message);} }

P多行溢出省略号的处理

因为-webkit-line-clamp: 2不兼容火狐或IE&#xff0c;采用判断浏览器的方式来启用哪个方式先判断是什么浏览器 //判断是否是谷歌浏览器 if (!stripos($_SERVER["HTTP_USER_AGENT"], chrome)) {$this->registerCssFile(web/css/view.css); } 行内样式&#xff08;…

缩小窗口时CSS背景图出现右侧空白BUG的解决方法

页面容器&#xff08;#wrap&#xff09;与页面头部&#xff08;#header &#xff09;为100%宽度。而内容的容器&#xff08;#page&#xff09;为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度&#xff1a; 改变浏览…

JAVA链接Mysql数据库(一)

第一步自定义 properties 文件 userroot password12345 urljdbc:mysql://localhost:3306/test?useUnicodetrue&characterEncodingutf8 driverClasscom.mysql.jdbc.Driver第二部 创建 java 文件运行 import java.io.InputStream; import java.sql.Connection; import java…

优化器,SGD+Momentum;Adagrad;RMSProp;Adam

Optimization 随机梯度下降&#xff08;SGD&#xff09;&#xff1a; 当损失函数在一个方向很敏感在另一个方向不敏感时&#xff0c;会产生上面的问题&#xff0c;红色的点以“Z”字形梯度下降&#xff0c;而不是以最短距离下降&#xff1b;这种情况在高维空间更加普遍。 SGD的…

iOS开发-平台使用TestFlight进行Beta测试

使用 TestFlight&#xff0c;你可以向测试人员发布你 App 的 prerelease 版本来收集反馈信息&#xff0c;为将来发布 App 的正式版做准备。现在 TestFlight 是一个可选功能&#xff0c;你也可以不使用它&#xff0c;而是像以往发布 App 那样直接提交到 appStore。 TestFlight 使…

QPixmap QImage 相互转化

QPainter p(this); QPixmap pixmap; pixmap.load("E:\\参考文件\\image\\1.jpg"); //QPixmap->QImage QImage tempImage pixmap.toImage(); p.drawImage(0,0,tempImage); QImage image; image.load("E:\\参考文件\\image\\1.jpg"); //QImage->QPixm…

java语言介绍 —(1)

1.基础常识 软件&#xff1a;即一系列按照特定顺序组织的计算机数据和指令的集合。分为&#xff1a;系统软件 和 应用软件 系统软件&#xff1a;windows , mac os , linux ,unix,android,ios,… 应用软件&#xff1a;word ,ppt,画图板,… 人机交互方式&#xff1a; 图形化界面…

微信小程序入门资源整理(热更新)

从零开始&#xff1a;微信小程序新手入门宝典《一》 传送门地址&#xff1a; https://segmentfault.com/a/1190000008035180 微信小程序部分资源整理 传送门地址&#xff1a;http://blog.csdn.net/u012995964/article/details/53116477

第一个java程序helloworld —(2)

1.开发体验——HelloWorld 1.1 编写 创建一个java源文件&#xff1a;HelloWorld.java class HelloChina{public static void main(String[] args){System.out.println("Hello,World!");} }1.2 编译&#xff1a; javac HelloWorld.java 1.3 运行&#xff1a; java Hel…

高并发大流量专题---6、独立图片服务器的部署

高并发大流量专题---6、独立图片服务器的部署 一、总结 一句话总结&#xff1a; 独立图片服务器还是非常有必要的&#xff0c;可以很大程度的降低主服务器的io以及提升用户访问速度 1、独立图片服务器 独立的必要性&#xff1f; 分担Web服务器的I/O负载&#xff1a;将耗费资源的…