HTML中表格的实现

作业要求：实现以下一个表格样式

购物车.jpg

内容分析：首先根据表格内容，可将表格分割成5x4的标准单元格。其中，表头“名称”和“小计”占两行标准单元格；表头“2016-11-22”占两列单元格；表头“总价”占三列标准单元格；其余内容各占一个标准单元格。
分析完毕以后，表头可通过以下方式实现 ，属性 colspan可设置占用标准单元格的几列，属性 rowspan可设置占用标准单元格的几行。

“名称”和“小计”：
“2016-11-22”：
“总价”：

实现代码如下（按行实现）：

    


    

        
购物车
    

        
名称
        
2016-11-22
        
小计
    
    

        
重量
        
单价
    
    

        
苹果
        
3公斤
        
5元/公斤
        
15元
     
  

        
香蕉
        
2公斤
        
6元/公斤
        
12元
      
      

        
总价
        
27元
    
    

结果展示：

按行实现.PNG

上面所说的按行实现，意思是指先实现表格中第一行的内容接着实现第二行的内容，以此类推。接下来又试了试按列来实现，即按表格的每一列来实现，代码如下：

    


    3公斤2公斤5元/公斤6元/公斤15元12元27元

        
购物车
        

            
名称
            
苹果
            
香蕉
            
总价
        
        

            
2016-11-22
            
重量
            

            

        
        

            
单价
            

            

        
        

            
小计
            

        

            

    
    

结果却是酱儿婶的：

按列实现.PNG

想了半天也没又想明白，难道默认按行来实现，不能按列来实现嘛？功力还不够深厚，目前不明白这是为什么捏？