前端如何实现表格布局

实现效果

表格布局效果图

详细实现思路

表格整体布局为：五行四列，部分单元格占据多行或者多列。
表格的标题是使用caption标签，使用这个标签的好处是：标题一直和表格整体对齐，不论怎么改变表格位置，标题一直相对表格在原先的位置上。

注意：这对标签必须写在

之间才能起作用，写在之外不起作用。

rowspan属性为设置该单元格可横跨的行数，colspan属性为设置该单元格可横跨的列数，表格中单元格“名称”和"小计"横跨两行，所以设置单元格的属性rowspan="2"；单元格"2016-11-22"横跨两列，所以设置单元格的属性colspan="2"；类似地，设置单元格“总价”的属性colspan="3"。

在下面的css代码中，对表格的整体边框和每个单元格的边框的样式进行了设置。

实现代码

HTML代码如下：

     
购物车
     

       
名称
       
2016-11-22
       
小计
     
     

       
重量
       
单价
     
     

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

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

       
总价
       
27元
     
   

CSS代码如下：