table合并单元格 colspan(跨列)和rowspan(跨行)

简介: table合并单元格 colspan(跨列)和rowspan(跨行)

colspan和rowspan这两个属性用于创建特殊的表格。

colspan是“column span(跨列)”的缩写。用在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>
相关文章
|
小程序 前端开发 API
【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
|
Linux 虚拟化
麒麟系统开发笔记(一):国产麒麟系统搭建开发环境之虚拟机安装
麒麟系统开发笔记(一):国产麒麟系统搭建开发环境之虚拟机安装
麒麟系统开发笔记(一):国产麒麟系统搭建开发环境之虚拟机安装
Echarts中tooltip的 formatter用法
Echarts中tooltip的 formatter用法
895 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
1114 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
12030 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
前端开发
翻转视角:CSS让卡片设计在网页上活起来!
翻转视角:CSS让卡片设计在网页上活起来!
|
前端开发 算法 容器
css【详解】grid布局—— 网格布局(栅格布局)(一)
css【详解】grid布局—— 网格布局(栅格布局)(一)
3049 1
|
存储 小程序 开发工具
《uni-app 开发微信小程序,如何实现神秘的在线预览 pdf 文件功能?快来一探究竟!》
【8月更文挑战第20天】在移动互联网时代,微信小程序备受开发者青睐。使用uni-app框架开发时,常需在线预览PDF文件。微信小程序不直接支持PDF预览,需借助第三方服务或特定方法。一种方案是利用腾讯云文档服务,注册账号后,在项目中引入SDK,并配置服务参数,调用接口实现预览。另一种方案是使用`pdf.js`,下载其小程序版并引入项目,加载PDF文件进行渲染。开发者可根据需求选择合适的方法,同时注意处理错误及优化性能,提升用户体验。
3195 0