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. 【原创】@ResponseBody返回json数据时出现中文乱码

    ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 原因: Spring中解析字符串的转换器默认编码格式是ISO-8859-1 public class StringHttpMessageCon ...

  2. 不需要客户端插件PHP也能实现单点登录

    分析CAS原理,构建PHP单点登录 单点登录(Single Sign On , 简称 SSO )是目前比较流行的服务于企业业务整合的解决方案之一, SSO 使得在多个应用系统中,用户 只需要登录一次就 ...

  3. ABP官方文档翻译 9.3 NHibernate集成

    NHibernate集成 Nuget包 配置 实体映射 仓储 默认实现 自定义仓储 应用程序特定基础仓储类 ABP可以使用任何ORM框架,它内置集成NHibernate.此文档将讲解ABP如何使用NH ...

  4. 如何解决Linux 系统下 ifconfig 命令无网络接口 ens33

    今天我在做Redis的哨兵集群模式的时候,以前都是好的,也不知道从什么时候开始就无法连接Redis服务器了,就是运行如下命令,没有效果:redis-server redis.conf,然后在通过命令查 ...

  5. WPF ”真正的“高仿QQ

    时常可以在各种论坛 博客 看到 各种所谓的 高仿QQ. 说实话 越看越想笑呢.(PS:纯粹的 抨击 那些 不追求 UI 完美主义者) 例如:       本次模仿 采用 C# WPF XAML , 总 ...

  6. Docker镜像管理

    镜像是docker的三大核心概念之一.可以用来创建容器. Docker的镜像实际上由一层一层的文件系统组成,这种层级的文件系统被称为UnionFS.镜像可以基于Dockerfile构建,Dockerf ...

  7. 阿里云CentOS使用iptables禁止某IP访问

    在CentOS下封停IP,有封杀网段和封杀单个IP两种形式.一般来说,现在的攻击者不会使用一个网段的IP来攻击(太招摇了),IP一般都是散列的.于是下面就详细说明一下封杀单个IP的命令,和解封单个IP ...

  8. file_put_contents写入文字换行

    file_put_contents写入文字换行 注意要使用双引号 "\r\n"

  9. 对html语义化的理解

    所有人都知道html即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言. html标签中的大部分都是由"语义化"标签所担任 那么,它有 ...

  10. angular2 localStorage的使用

    最近从ng1  转ng2     相信 使用ng1的同学都知道 ngStorage 这个插件吧,  存储 本地数据 下面介绍一下 ng2 使用 localStorage 参考 github https ...