HTML中table标签属性以及练习实例

实现表格样式，在HTML实现中，可以使用table标签。

• table 常用的属性

1. 边框属性 border 
2. 背景色属性或者背景图片属性
3. table内容边距 cellpadding 
4. table单元格之间的距离 cellspacing
5. 占据的行数 rowspan
6. 占据的列数 colspan
7. table 表格的标题
8. 常用的标签 行标签，列标签,标题标签
9. table 表框显示属性 frame

例子:

测试代码:

    

        

            
学生
             
 学生信息表
        
        

            
序号
            
姓名
             
性别
             
年龄
             
电话
             
住址
        
        

           
1
            
张三
             
男
             
23
             
110
             
雁塔
        
        

           
2
            
张三
             
男
             
23
             
110
             
雁塔
        
        

           
3
            
张三
             
男
             
23
             
110
             
雁塔
        
    

        table{
            /*border: 1px solid green;*/
            border-right: 1px solid green;
            border-bottom: 1px solid green;
        }
        table td,th{
            /*border:  1px solid red;*/
            border-left: 1px solid red;
            border-top: 1px solid red;
        }

        .type{

            padding: 0px 15px;
        }
        .property td{
            text-align: left;;
            width: 100px;
            /*padding: 0px 20px;*/
        }
        .address{
            width: 180px !important;
        }

例子2:

源码实例:

    

        

            

                姓名
                
            
            

                性别
                
                     --性别选择--
                    男
                     男
                
            
        
        

            

                手机号码
                
            
            

                电子邮箱
                
            
        
        

            

                教育程度
                
            
            

                工作职位
                
            
        
        

            

                工作城市
                
            
            

                期望席子
                
            
        
        

            

                自我介绍
                
            
            
        

        

            

                特长
                
            
        
        

            

                地址
                
            
        

    

        .table2{
            background: green;
        }

        .table2 label{
            width: 70px;
            height: 40px;
            background-color: red;
            text-align: center;;
            font-size: 14px;
            line-height: 40px;
            display: inline-block;;

        }
        .middle_input{
            width: 120px;
            height: 28px;
            margin: 1px;
        }
        .full{
            width: 100%;
        }
        .bottom_input{
            width: 360px;
            height: 28px;
        }

例子3:

    

        

            
车辆信息
        
        

            
序列号
            
234721800000028
        
        

            
名称
            
三轮028
        
        

            
电压
            
46V
             
网络
            
在线
        
        

            
设定时长(分钟)
            
30
        
        

            
解锁
            
锁定
            
轨迹
            
跟踪
        
    

        .car_table{
            border-right: #c0c0c0 solid 1px;
            border-bottom: #c0c0c0 solid 1px;
        }

        .car_table td{
            border-top: #c0c0c0 solid 1px;
            border-left: #c0c0c0 solid 1px;
        }

        .car_table td{
            color: #666;
            font-size: 12px;
            padding: 5px 10px;
        }
        .title_info{
            text-align: center;;
            background: rgb(252, 249, 242);
            color: #672;

        }

学习博客:

https://blog.csdn.net/weixin_41179709/article/details/82822317

http://www.w3school.com.cn/tags/tag_table.asp