HTML表格跨行跨列操作(rowspan、colspan)
2021-03-15 04:01
2091 查看
一般使用<td>元素的colspan属性来实现单元格跨列操作,使用<td>元素的rowspan属性来实现单元格的跨行操作。
colspan属性规定单元格可横跨的列数,所有浏览器都支持colspan属性。其取值为number,如下图所示:
例如:
<table border="1"> <tr> <th>星期一</th> <th>星期二</th> </tr> <tr> <td colspan="2">星期天</td> </tr> </table>
实现结果如下图所示:
rowspan属性规定单元格可横跨的列数,所有浏览器都支持rowspan属性。其取值为number,如下图所示:
例如:
<table border="1"> <tr> <td rowspan="2">星期一</td> <td>星期二</td> </tr> <tr> <td>星期三</td> </tr> </table>
实现结果如下图所示:
总结colspan和rowspan的使用如下:
<table border="1"> <tr> <th colspan="3">物资详情说明</th> </tr> <tr> <td colspan="2" align="center">数量(支)</td> <td rowspan="2">重量(吨)</td> </tr> <tr> <td>实发数</td> <td>实收数</td> </tr> <tr> <td>12</td> <td>10</td> <td>100.00</td> </tr> </table>
实现结果如下图所示:
到此这篇关于HTML表格跨行跨列操作(rowspan、colspan)的文章就介绍到这了,更多相关HTML表格跨行跨列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- HTML外部样式表如何引入CSS样式
- 浅谈HTML文件引入外部CSS文件时路径的写法总结
- html转pdf截图保存功能的实现
- 一分钟带你体验html+vue+element-ui的丝滑
- 在HTML中限制input 输入框只能输入纯数字的实现
- html+css实现充电水滴融合特效代码
- html+css实现响应式卡片悬停效果
- html+css+js实现导航栏滚动渐变效果
- 使用HTML和JavaScript播放本地的媒体(视频音频)文件的方法
- HTML 拖拉功能的实现代码
- html列表框、文本域、文件域的示例代码
- HTML页面缩小后显示滚动条的示例代码
- html table呈现个人简历以及单元格宽度失效的问题解决
- 使用HTML和CSS实现的标签云效果(附demo)
- HTML元素拖拽功能实现的完整实例
- HTML基本标签及结构详解
- 在HTML里加载摄像头的方法
- HTML用户注册页面设置源码
- html 指定页面字符集的两种方法