1、多表头表格代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多表头表格</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>

2、运行结果

HTML多表头表格的更多相关文章

  1. FineUI小技巧（7）多表头表格导出

    前言 之前我们曾写过一篇文章 FineUI小技巧(3)表格导出与文件下载,对于在 FineUI 中导出表格数据进行了详细描述.今天我们要更进一步,介绍下如何导出多表头表格. 多表头表格的标签定义 在 ...

  2. JS实现点击表头表格自动排序（含数字、字符串、日期）

    这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...

  3. (转)用JQuery实现Fix表头表格

    本文转载自:http://www.cnblogs.com/evlon/archive/2009/06/12/1502239.html 我的技术要点: 1.用两个表,其中一个是表头,另一个是表格做表体 ...

  4. bootstrap表格固定表头,表格内容滚动条滚动显示

    直接贴代码--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  5. 艺赛旗RPA-处理无表头表格

    今天写一个demo,要求是对表格数据用价格为key进行排序 样本数据有两种格式: 一.第一行是一个大单元格 处理步骤: 在不变参数的情况下读取表格数据: 结果如下: 可以看见表头: Unnamed: ...

  6. 导出多级表头表格到Excel

    方法一:用NPOI定义多级表头导出: 引用头: using NPOI.DDF; using NPOI.OpenXmlFormats.Wordprocessing; using NPOI.HSSF.Us ...

  7. element-ui中table表头表格错误问题解决

    我用的是element-ui v1.4.3 在iframe关闭和切换导航会引起有table的表格错位,解决办法: handleAdminNavTab: function(tab) { var admi ...

  8. UEditor之斜线表头表格的定制

    效果图: 图1: 图2:

  9. 基于Vue element-ui实现支持多级纵向动态表头的仿表格布局

    [本文出自天外归云的博客园] 需求图示如下,多级纵向动态表头表格: 我的思路是用element-ui的layout实现,做出一个仿造表格,能够支持动态的.多级的.纵向的表头: <template ...

随机推荐

  1. excel中的数据导出为properties和map的方法

    在做项目的过程中,经常需要处理excel数据,特别是和业务人员配合时,业务人员喜欢使用excel处理一些数据,然后交给我们技术人员进行程序处理.利用POI读取写入excel数据,是经常使用的一个情景. ...

  2. java中自定义异常类

    hello,大家好,今天跟大家分享一下java中如何自定义异常,以后如果有新的心得,再添加,欢迎前辈指导... 首先,上Api,看一下异常和错误的父类: 然后,现在假设我有个循环(i=0;i<1 ...

  3. Hands-On Machine Learning with Scikit-Learn and TensorFlow---读书笔记

    去年在北京参加了一次由O'Reilly和Cloudera联合举办的大数据会议Strata Data Conference,并有幸获得了O'Reilly出版的Hands-On Machine Learn ...

  4. grep工具及正则表达式

    正则表达式和通配符 正则表达式与通配符不一样,它们表示的含义并不相同!正则表达式只是一种表示法,只要工具支持这种表示法,那么该工具就可以处理正则表达式的字符串.vim.grep.awk.sed都支持正 ...

  5. JUnit5 技术前瞻

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6868495.html   JUnit ...

  6. Matplotlib快速入门笔记

    我正以Python作为突破口,入门机器学习相关知识.出于机器学习实践过程中的需要,快速了解了一下matplotlib绘图库.下图是我学习过程中整理的一些概念. 本文将以该图为线索梳理相关概念. 简介 ...

  7. 洛谷 [P1402] 酒店之王

    有两个约束条件的二分图匹配 我们回忆一下二分图匹配的匈牙利算法的具体流程,它是通过寻找增广路来判断最大匹配数的,我们再观察一下题目中的两个条件,只有两个条件都满足,才算找到一条增广路,所以我们可以分别 ...

  8. POJ 2154 Color [Polya 数论]

    和上题一样,只考虑旋转等价,只不过颜色和珠子$1e9$ 一样的式子 $\sum\limits_{i=1}^n m^{gcd(i,n)}$ 然后按$gcd$分类,枚举$n$的约数 如果这个也化不出来我莫 ...

  9. Dapper入门教程（二）——执行非查询语句

    描述 你可以从任意实现IDbConnection的类对象中调用Dapper的扩展方法"Execute".它能够执行一条命令(Command)一次或者多次,并返回受影响的行数.这个方 ...

  10. Redis 学习(一) —— 安装、通用key操作命令

    一.Redis介绍 1.介绍 通常,在系统中,我们会把数据交由数据库来存储,但传统的数据库增删查改的性能较差,且比较复杂.根据 80/20 法则,百分之八十的业务访问集中在百分之二十的数据上.是否可以 ...