HTML基础之表格

明确目标

我们需要实现这样的表格


目标.png
任务列表

1.设定表格边框和加上标题
2.实现一个类似目标表格的表格
3.合并表格以及把该居中的表格数据居中
4.加粗字体

任务拆分

1.首先先将表格的框框给设定好,以及写上表格的标题

//border负责设置边框大小,也可以设置边框的其他属性
    //caption是责设置表格标题及将标题居中
    
购物车
100 200 300

运行结果


运行结果.png

2.因为这是一个四行四列的表格,所以我们先将表格实现出来

//每个表格行由 tr 标签开始
        //每个表格数据由 td 标签开始
        
购物车
名称2016-11-22 小计
重量 单价
苹果 3公斤 5元/公斤 15元
香蕉 2公斤 6元/公斤 12元
总价 27元

运行结果

初步表格.png

3.接下来我们负责合并表格并把该居中的表格数据居中


    名称//rowspan是负责横跨列单元格的,至于横跨几格可以自己设置
    2016-11-22//colspan是负责横跨行单元格的,也是可以自己设置
    小计

 
    总价//align是负责将表格数据定位的,这里我们将数据设为居中
    27元

运行结果

合并.png

4.将该加粗的字体加粗


    名称//将td改为th便可以将字体加粗了
    2016-11-22
    小计

最后整合一下代码便可以得到目标表格了。
用词不够严谨若有错误之处欢迎指出。

你可能感兴趣的:(HTML基础之表格)