HTML中table表格拆分合并(colspan、rowspan)


Posted in HTML / CSS onApril 07, 2021

代码演示 横向合并:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>演示table标记2--单元格合并</title>
        <style type="text/css">
            td{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <table border="1" cellspacing="0" width="50%" height="150">
            <caption>横向合并单元格</caption>
<!--colspan中必须指定要合并的列数目,是两列还是三列等等-->        
            <tr> <th colspan="2">姓名和年龄</th> <th>电话</th> </tr>
            <tr> <td>Jack</td> <td>24</td> <td>1351234567</td>  </tr>
            <tr> <td>Tom</td> <td>22</td> <td>1351234567</td>  </tr>
            <tr> <td>Rose</td> <td>22</td> <td>1351234567</td>  </tr>
            <tr> <td>张三</td> <td>25</td> <td>1351234567</td>  </tr>
        </table>
        <br/>

        <table border="1" cellspacing="0" width="50%" height="150">

运行结果:

HTML中table表格拆分合并(colspan、rowspan)

代码演示 纵向合并:

<table border="1" cellspacing="0" width="50%" height="150">
            <caption>纵向合并单元格</caption>
            <tr><th>班级</t> <th>姓名</th><th>年龄</th> <th>电话</th> </tr>
            <tr><td rowspan="2">601班</td> <td>Jack</td> <td>24</td> <td>1351234567</td>  </tr>
            <tr> <td>Tom</td> <td>22</td> <td>1351234567</td>  </tr>
<!--rowspan中必须指定要合并的列数目,是两行还是三行等等-->    
            <tr><td  rowspan="3">602班</td> <td>Rose</td> <td>22</td> <td>1351234567</td>  </tr>
            <tr> <td>张三</td> <td>25</td> <td>1351234567</td>  </tr>
            <tr> <td>李四</td> <td>25</td> <td>1351234567</td>  </tr>
        </table>
    </body>
</html>

运行结果:

HTML中table表格拆分合并(colspan、rowspan)

到此这篇关于HTML中table表格拆分合并(colspan、rowspan)的文章就介绍到这了,更多相关table表格拆分合并内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
HTML速写之Emmet语法规则的实现
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 #HTML / CSS
html+css 实现简易导航栏功能
Apr 07 #HTML / CSS
css3实现的加载动画效果
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
You might like
浅谈PHP语法(1)
2006/10/09 PHP
php 将excel导入mysql
2009/11/09 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
Bootstrap响应式表格详解
2017/05/23 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
什么时候用assert
2015/05/08 面试题
计算机个人求职信范例
2014/01/24 职场文书
上班离岗检讨书
2014/01/27 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
自主招生推荐信范文
2014/05/10 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
python套接字socket通信
2022/04/01 Python