html-表格购物车实现

今天要实现的表格是这样的

目标表格

设置表格的边框

可以看出这个表格是有边框的，所以我们需要设置border

设置表格的题目

我们使用caption 来添加表格的标题。

 
        
购物车
  

实现表格

表格会用到哪些标签：

• 标签是来定义一行的
• 标签定义表格中的表头
• 标签定义表格中的一列
• 标签定义表格的页头
• 标签定义表格的主体
• 标签定义表格的页脚
• rowspan表示表格占得行数,是用来合并行
• colspan表示表格占得列数,是用来合并列

1. 用标签实现表格的页头

 
  
购物车
  
   
   
      
    
         
名称
     
         
2016-11-22
  
         
小计
  
      
   
      
    
         
重量
 
         
单价
 
      
  
 

实现效果：

表头实现图

2. 用标签实现表格的页头(tody部分代码)

       
       苹果 
       3公斤  
       5元/公斤 
       15元
  
     
       香蕉 
       ２公斤  
       ６元/公斤 
       1２元
  

实现结果图：

tbody实现图

3. tfoot实现表格的尾

代码如下：

        
        总价 
       27元
    

加上表尾结果图：

表尾结果图

4. align="center"实现表格文字居中

在 tfoot标签中加上align="center"就可以实现所有文字居中的这个最后效果啦

最终结果图.png

最后，若看完整的源代码，请戳这里github地址