今天要实现的表格是这样的
目标表格
设置表格的边框
可以看出这个表格是有边框的,所以我们需要设置border
设置表格的题目
我们使用caption 来添加表格的标题。
实现表格
表格会用到哪些标签:
标签是来定义一行的标签定义表格中的表头标签定义表格中的一列标签定义表格的页头
标签定义表格的主体标签定义表格的页脚rowspan表示表格占得行数,是用来合并行
colspan表示表格占得列数,是用来合并列
1. 用标签实现表格的页头
名称2016-11-22小计重量单价
实现效果:
表头实现图
2. 用标签实现表格的页头(tody部分代码)
苹果3公斤5元/公斤15元香蕉2公斤6元/公斤12元实现结果图:
tbody实现图
3. tfoot实现表格的尾
代码如下:
总价27元加上表尾结果图:
表尾结果图
4. align="center"实现表格文字居中
在
tfoot标签中加上align="center"就可以实现所有文字居中的这个最后效果啦最终结果图.png
最后,若看完整的源代码,请戳这里github地址