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. 本地工程引入maven工程的配置方式

    一.准备 IDE: IntelliJ IDEA 2016.3.1 maven: 3.5.2 JDK: 1.8 操作系统: Window 7 二.配置 1. maven 3.5 下载地址:http:// ...

  2. mvn mybatis-generator:generate postgresql

    postgresql 配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE genera ...

  3. GitHub入门之路(1)

    介绍 从本篇文章开始,是一系列介绍GitHub相关内容以及Git的一些基本操作的文章,记录了自己的学习过程. 概要 简单介绍GitHub是什么,Git又是什么. 1.Git是什么 Git是一款分散型的 ...

  4. BZOJ 1396&&2865 识别子串[后缀自动机 线段树]

    Description 在这个问题中,给定一个字符串S,与一个整数K,定义S的子串T=S(i, j)是关于第K位的识别子串,满足以下两个条件: 1.i≤K≤j. 2.子串T只在S中出现过一次. 例如, ...

  5. ------- 软件调试——注销 QQ 过滤驱动设置的事件通知 CallBack （完）-------

    ---------------------------------------------------------------------------------- 本系列的最后一篇演示如何通过调试手 ...

  6. OpenLayer3调用天地图，拖拽后，地图消失的问题[已解决]

    拖拽后,地图直接消失了,而且右上角的坐标变成了NaN,NaN 后来经过测试发现,原来是自己封装有问题,坐标点一定要用parseFloat()转换下,但不清楚为什么页面刚开始加载的时候没有问题,总之能解 ...

  7. 广告中的AdNetwork、AdExchange、DSP、SSP、RTB和DMP是什么？

    [https://www.douban.com/note/557732418/?type=rec] AdNetwork.AdExchange.DSP.SSP.RTB.DMP这些模式之间存在着内在的关系 ...

  8. iperf命令

    iperf命令网络测试 iperf命令是一个网络性能测试工具.iperf可以测试TCP和UDP带宽质量.iperf可以测量最大TCP带宽,具有多种参数和UDP特性.iperf可以报告带宽,延迟抖动和数 ...

  9. 图书管理系统【JavaWeb:部署开发环境、解决分类、图书、前台页面模块】

    前言 巩固Servlet+JSP开发模式,做一个比较完整的小项目. 成果图 该项目包含了两个部分,前台和后台. 前台用于显示 后台用于管理 该项目可分为5个模块来组成:分类模块,用户模块,图书模块,购 ...

  10. HashMap、Hashtable、 LinkedHashMap、TreeMap四者之分。

    java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HasMap.Hashtable.LinkedHasmap和TreeMap. (1)HashMa ...