使用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 相关文章推荐
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 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
PHP中的integer类型使用分析
2010/07/27 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
JS回调函数深入理解
2019/10/16 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python中pygame模块用法实例
2014/10/09 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
详解Django配置JWT认证方式
2020/05/09 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
企业厂长岗位职责
2013/12/17 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
新闻人物通讯稿
2014/10/09 职场文书
合作协议书格式范本
2016/03/21 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
PyTorch中permute的使用方法
2022/04/26 Python