数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

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

来源:脚本之家  责任编辑:小易  

使用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实现表格实现标题合并的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


  • 本文相关:
  • 基于html5实现的语音搜索功能
  • 怎样实现h5+css3手指滑动切换图片的示例代码
  • 深入了解canvas在移动端绘制模糊的问题解决
  • 详解使用双缓存解决canvas clearrect引起的闪屏问题
  • 浅谈html5新增和废弃的标签
  • html5实现单张、多张图片上传功能
  • html5中监听canvas内部元素点击事件的三种方法
  • html5网页录音和上传到服务器支持pc、android,支持ios微信功能
  • canvas实现贝赛尔曲线轨迹动画的示例代码
  • 可能这些是你想要的h5软键盘兼容方案(小结)
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved