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 相关文章推荐
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
HTML速写之Emmet语法规则的实现
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 #HTML / CSS
html+css 实现简易导航栏功能
Apr 07 #HTML / CSS
css3实现的加载动画效果
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
You might like
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python中map、any、all函数用法分析
2015/04/21 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python如何实现代码检查
2019/06/28 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
本科毕业生专业自荐书范文
2014/02/05 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
人事任命书格式
2014/06/05 职场文书
新农村建设标语
2014/06/24 职场文书
安全标兵事迹材料
2014/08/17 职场文书
春季运动会开幕词
2015/01/28 职场文书
大连导游词
2015/02/12 职场文书
初二英语教学反思
2016/02/15 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
python3.9之你应该知道的新特性详解
2021/04/29 Python