前端如何实现表格布局

实现效果

前端如何实现表格布局_第1张图片
表格布局效果图

详细实现思路

表格整体布局为:五行四列,部分单元格占据多行或者多列。
表格的标题是使用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代码如下:

 

你可能感兴趣的:(前端如何实现表格布局)