html表格实现

一.明确目标:

表格.png

二.分解任务:
第一步:明确表格的标题;
第一步:明确表格的行数列数以及跨行跨列情况;
第三步:明确表格的表头:行表头和列表头;
三.写实现:

<table border="1px">    
 <caption>购物车</caption>    
 <tr>        
       <th rowspan="2">名称</th>        
       <th colspan="2">2016-11-22</th>        
       <th rowspan="2">小计</th>    
  </tr>    
  <tr>                
       <th>重量</th>        
       <th>单价</th>         
  </tr>    
  <tr>        
        <th>苹果</th>        
        <td>3公斤</td>        
        <td>5元/公斤</td>        
        <td>15元</td>    
   </tr>    
   <tr>        
         <th>香蕉</th>        
         <td>2公斤</td>        
         <td>6元/公斤</td>        
         <td>12元</td>    
   </tr>    
   <tr>        
        <th colspan="3">总计</th>       
        <td>27元</td>    
   </tr>
  </table>

实现表格.png

四.反思总结:
分析表头时,忽略了列表头;
不论问题大小,不应着急写实现,明确每一步的实现步骤后再动手;
对待小问题也要观察分析,养成良好的习惯.