table合并单元格 colspan(跨列)和rowspan(跨行)
原文链接
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>
table合并单元格 colspan(跨列)和rowspan(跨行)相关推荐
- html表单合并两列单元格,table合并单元格colspan和rowspan .
colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列 ...
- table合并单元格colspan和rowspan
colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列 ...
- vue中用table_Vue中table合并单元格用法
地名 结果 人名 性别 {{item.name}} 已完成 未完成 {{item.groups[0].name}} {{item.groups[0].sex}} {{item.groups[son]. ...
- Table合并单元格,表格居中,内容居中显示
例如:新建一张四行四列的表格,第一行的四列合并,第二.三.四行的第一列合并在一起居中显示 <%@ page language="java" contentType=" ...
- 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行
1.常用表格标签 普通 <table> | <tr> | | <th ...
- element plus的table合并单元格
element的table合并单元格 就element+中的el-table中的span-method方法的使用和遇到的一些问题 如果想要将后一列挨着的单元格合并,return 1,2,但是得将后一个 ...
- Bootstrap mergeCells合并单元格(多列)
/** 合并单元格 @param target 目标表格对象 @param data 原始数据(在服务端完成排序) @param fieldName 合并参照的属性名称 @param fieldLis ...
- vue原生table合并单元格
vue原生table合并单元格 <table border="1"><thead><tr><th>学习</th>< ...
- 2.单元格的跨列居中和自动换行
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 单元格的跨列居中和自动换行 前言 一.跨列居中 二.自动换行 前言 制作表格时,为了不影响后续的数据处理与分析,可以使用跨列居中功能代 ...
最新文章
- 事物Spring boot @Transactional
- SQL Server聚集索引的选择
- flowable实战(六)flowable的意见表和附件表应用
- Install Google Chrome using Apt-Get in Ubuntu
- 在VS2015中使用SDL2.0
- php中的opendir函数,php中opendir函数用法实例
- 热敏电阻(NTC)的基本参数及其应用
- 各种模拟器端口号及模拟器连接方式
- 笔记本连接显示器后没有声音_电脑连接HDMI显示器后没声音的解决办法
- 虚拟主机,VPS,云主机之间的区别?
- 金蝶K3案例实验实际成本前台操作
- OBS插件开发以及OBS插件的选择(obs直播插件)
- 第一章 大数据发展数据与鲲鹏大数据
- 3个月学习成功上岗软件测试,我一个文科女也能吃IT饭了
- C++ 关于指针变量所占内存空间大小的问题
- 腾讯新使命科技向善,首先对公众号善意一些可以吗?
- 京信通信【驱动软件工程师】面经
- Beef-xss安装及使用
- R语言基础 chapter2
- Tapd 、Jira、Tower对比
热门文章
- c++ Qt5学习笔记 2021-1-21(文件系统QFile、QFileInfo、QDir、QFileSystemWatcher等使用,读取文本显示乱码,QDataStream二进制字节流读写)
- 设计模式——门面模式(Facade Pattern)
- opencv手写数字识别(未完待续...)
- 微型计算机与接口技术答案,微机原理及接口技术-习题答案
- c语言孙力课后作业答案,课后作业答案
- CSDN如何公开私密博客
- ElasticSearch 7.8.1教程(from b站狂神)+JD商城仿站
- 爱你,是一种流泪的幸福
- .NET经典图书推荐(上)
- 战舰少女服务器不显示,老玩家告诉你游戏战舰少女连不上网的解决方法