HTML 表格练习题

本节将为大家讲解 HTML 如何实现下图所示表格效果，先来看看最终实现效果吧！

table.png

• 新建 table.html 文件，并输入以下框架代码（本文编辑器采用Notepad++）；

• 对题目要求表格进行分析，可以发现该表格包含：表格标题，表头和内容三部分，且表格共有五行。首先我们先创建表格标题，caption 标签指定表格标题，代码如下所示：

    



    

        
购物车
 
    

• 其次，创建五行内容，其中两行为表头，三行为内容。行用 标签表示，代码如下所示：

    



    

        
购物车
        

        

        

        

        

        

        

        

        

        
    

• 其次，构建表头。表头包含两行，“名称”和“小计”均占用两行一列行，“2016-11-22”占用一行两列，“重量”和“单价”均占用一行一列。rowspan 属性指定单元格占用行数，colspan 属性指定单元格占用列数，因此表头构建代码如下所示：

    



    

        
购物车
        

            
名称
            
2016-11-22
            
小计
        

        

            
重量
            
单价
        

        

        

        

        

        

        
    

• 接下来，填充表格第3~4行内容，代码如下所示：

    



    

        
购物车
        

            
名称
            
2016-11-22
            
小计
        

        

            
重量
            
单价
        

        

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

        

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

        

        
    

• 最后，填充表格第5行内容，其中“总价”占用一行三列，且居中显示。属性colspan="3"实现单元格占用三列效果，属性align="center"实现居中显示效果，因此表格最终代码实现如下所示：

    



    

        
购物车
        

            
名称
            
2016-11-22
            
小计
        

        

            
重量
            
单价
        

        

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

        

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

        

            
总价
            
27元
        
    

相关资料：

W3School上的HTML教程：http://www.w3school.com.cn/tags/tag_table.asp

源码 Github 链接：https://github.com/anyangxaut/HTML-Learning-Demo