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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！