HTML表格实现

一. 所要实现的表格

购物车表格

二 .实现过程

分析第一步

1. 是一个5行4列的表格
2. 表格样式 border 宽为1px ,文字居中

代码实现如下

 
购物车
  

   
名称
   
2016-11-22
   

   
小计
  
  

   

   
重量
   
单价
   

  
  
  

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

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

   
总计
   

   

   
27元
  
 

此时，页面效果为：

页面初步效果

分析第二步

发现与要实现的表格不一样，原因是没有合并单元格
colspan 合并列单元格
rowspan合并行单元格

运用合并单元格后，页面效果为：

合并单元格后

好了，表格实现完毕。

每天都努力一点
谢谢你看完

---