表格中复杂表头的编辑

2018-06-04 本文已影响24人年丶轮

（新手写给新手的share吧，各位方家还请海涵）

1.什么算是复杂表头

样例

2.如何设置

众所周知，简单的行合并和列合并方法很简单，分别使用rowspan和colspan就ok了。

但是，像这样的表头往往新手第一次会不知道如何下手（其实笔者就是新手：），借此，给大家share一下我的一点点经验吧。

废话不多说，先上代码为敬。

<!DOCTYPE html>                                     
<html lang="en">                                    
<head>                                              
    <meta charset="UTF-8">                          
    <title>biaoge 1</title>                         
    <link rel="stylesheet"href="biaoge.css">        
</head>                                             
<body>                                              
<table border="1">                                  
    <caption>购物车</caption>                          
    <thead>                                         
    <tr>                                            
        <th rowspan="2">名称</th>                     
        <th colspan="2">2016--11--22</th>           
        <th rowspan="2">小计</th>                     
    </tr>                                           
    <tr>                                            
        <th>重量</th>                                 
        <th>单价</th>                                 
    </tr>                                           
    </thead>                                        
    <tbody>                                         
    <tr>                                            
        <td>苹果</td>                                 
        <td>3公斤</td>                                
        <td>5元/公斤</td>                              
        <td>15元</td>                                
    </tr>                                           
    <tr>                                            
        <td>香蕉</td>                                 
        <td>2公斤</td>                                
        <td>6元/公斤</td>                              
        <td>12元</td>                                
    </tr>                                           
    </tbody>                                        
    <tfoot>                                         
    <tr>                                            
        <td colspan="3" style="text-align: center">总
        <td>27元</td>                                
    </tr>                                           
    </tfoot>                                        
</table>                                            
</body>                                             
</html>

如果你还有一些疑问的话，那就看过来！

接下来讲一下步骤。

首先，咱们很快的把大致框架写出来，但是，这个表头千万不要这么写：