使用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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 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 Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python版飞机大战代码分享
2018/11/20 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
电信专业应届生自荐信
2013/09/28 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript