使用html5实现表格实现标题合并的实例代码


Posted in HTML / CSS onMay 13, 2019

使用html5实现表格实现标题合并的实例代码

这样的需求不在少数,比如表格中相邻的列具有相同的内容,那么标题就完全可以使用一个,那么合并标题就是十分重要的,让用户感觉也会更加人性化,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端学习扣qun:731771211  每日分享技术,学术交流</title>
<style type="text/css">
body{
  width:98%;
  height:100%;
  font-size:12px;
  background-color:#FCF;
  text-align:center;
}
#tab{
  width:100%;
  height:100%;
  font-size:12px;
  font-family:Verdana, Geneva, sans-serif Georgia, "Times New Roman", Times, serif;
  font-weight:bolder;
  background-color:#9F0;
}
</style>
</head>
<body>
<table id="tab" cellpadding="1" cellspacing="1" border="1">
  <tr>
    <th rowspan="2">序号</th>
    <th colspan="2">王五</th>
    <th colspan="2">李四</th>
    <th colspan="2">孙传</th>
    <th colspan="2">胡平</th>
    <th rowspan="2">合计</th>
  </tr>
  <tr>
    <th>语文</th>
    <th>数学</th>
    <th>语文</th>
    <th>数学</th>
    <th>语文</th>
    <th>数学</th>
    <th>语文</th>
    <th>数学</th>
  </tr>
  <tr>
    <th>1</th>
    <th>78</th>
    <th>96</th>
    <th>67</th>
    <th>98</th>
    <th>88</th>
    <th>75</th>
    <th>94</th>
    <th>69</th>
    <th> </th>
  </tr>
  <tr>
    <th>2</th>
    <th>89</th>
    <th>68</th>
    <th>77</th>
    <th>87</th>
    <th>84</th>
    <th>76</th>
    <th>71</th>
    <th>87</th>
    <th> </th>
  </tr>
  <tr>
    <th>3</th>
    <th>75</th>
    <th>78</th>
    <th>89</th>
    <th>74</th>
    <th>65</th>
    <th>68</th>
    <th>98</th>
    <th>90</th>
    <th></th>
  </tr>
  <tr>
    <th>4</th>
    <th>79</th>
    <th>89</th>
    <th>65</th>
    <th>62</th>
    <th>64</th>
    <th>87</th>
    <th>97</th>
    <th>91</th>
    <th></th>
  </tr>
  <tr>
    <th>5</th>
    <th>89</th>
    <th>96</th>
    <th>67</th>
    <th>76</th>
    <th>74</th>
    <th>84</th>
    <th>67</th>
    <th>81</th>
    <th></th>
  </tr>
  <tr>
    <th>6</th>
    <th>94</th>
    <th>90</th>
    <th>97</th>
    <th>74</th>
    <th>62</th>
    <th>81</th>
    <th>78</th>
    <th>78</th>
    <th></th>
  </tr>
  <tr>
    <th>7</th>
    <th>78</th>
    <th>89</th>
    <th>77</th>
    <th>87</th>
    <th>45</th>
    <th>86</th>
    <th>77</th>
    <th>98</th>
    <th></th>
  </tr>
  <tr>
    <th>8</th>
    <th>65</th>
    <th>67</th>
    <th>94</th>
    <th>68</th>
    <th>87</th>
    <th>69</th>
    <th>78</th>
    <th>68</th>
    <th></th>
  </tr>
  <tr>
    <th>9</th>
    <th>86</th>
    <th>98</th>
    <th>87</th>
    <th>87</th>
    <th>65</th>
    <th>78</th>
    <th>98</th>
    <th>79</th>
    <th></th>
  </tr>
  <tr>
    <th>10</th>
    <th>88</th>
    <th>75</th>
    <th>77</th>
    <th>97</th>
    <th>97</th>
    <th>77</th>
    <th>70</th>
    <th>87</th>
    <th></th>
  </tr>
</table>
</body>
</html>

总结

以上所述是小编给大家介绍的使用html5实现表格实现标题合并的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
基于Html5实现的语音搜索功能
May 13 #HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 #HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 #HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 #HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 #HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 #HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 #HTML / CSS
You might like
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
requireJS使用指南
2016/04/27 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
Java面试题汇总
2015/12/06 面试题
护士自我鉴定
2013/10/23 职场文书
自考自我鉴定范文
2013/10/30 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
售房委托书
2014/08/30 职场文书
先进党支部事迹材料
2014/12/24 职场文书
行为规范主题班会
2015/08/13 职场文书
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL