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

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

• table 常用的属性

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

例子:

测试代码:

    <table cellspacing='0px'>
        <tr>
            <td bgcolor='orange' rowspan='5' class='type'>学生</td>
             <th bgcolor='cyan' colspan='6'> 学生信息表</th>
        </tr>
        <tr class='property' bgcolor='yellow'>
            <td >序号</td>
            <td >姓名</td>
             <td >性别</td>
             <td >年龄</td>
             <td >电话</td>
             <td class='address'>住址</td>
        </tr>
        <tr bgcolor='gray'>
           <td >1</td>
            <td >张三</td>
             <td >男</td>
             <td >23</td>
             <td >110</td>
             <td>雁塔</td>
        </tr>
        <tr bgcolor='gray'>
           <td >2</td>
            <td >张三</td>
             <td >男</td>
             <td >23</td>
             <td >110</td>
             <td>雁塔</td>
        </tr>
        <tr bgcolor='gray'>
           <td >3</td>
            <td >张三</td>
             <td >男</td>
             <td >23</td>
             <td >110</td>
             <td>雁塔</td>
        </tr>
    </table>

        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:

源码实例:

    <table class='table2' cellspacing='0'>
        <tr>
            <td>
                <label>姓名</label>
                <input class='middle_input'/>
            </td>
            <td>
                <label>性别</label>
                <select>
                     <option>--性别选择--</option>
                    <option>男</option>
                     <option>男</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label>手机号码</label>
                <input class='middle_input'/>
            </td>
            <td>
                <label>电子邮箱</label>
                <input class='middle_input'/>
            </td>
        </tr>
        <tr>
            <td>
                <label>教育程度</label>
                <input class='middle_input'/>
            </td>
            <td>
                <label>工作职位</label>
                <input class='middle_input'/>
            </td>
        </tr>
        <tr>
            <td>
                <label>工作城市</label>
                <input class='middle_input'/>
            </td>
            <td>
                <label>期望席子</label>
                <input class='middle_input'/>
            </td>
        </tr>
        <tr class='full'>
            <td colspan='2'>
                <label>自我介绍</label>
                <input class='bottom_input'/>
            </td>
            <!-- <td colspan='2'> <input class='bottom_input'/></td> -->
        </tr>

        <tr>
            <td  colspan='2'>
                <label>特长</label>
                <input class='bottom_input'/>
            </td>
        </tr>
        <tr>
            <td  colspan='2'>
                <label>地址</label>
                <input class='bottom_input'/>
            </td>
        </tr>

    </table>

        .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:

    <table class='car_table' cellspacing='0'>
        <tr>
            <td colspan ='4' class='title_info'>车辆信息</td>
        </tr>
        <tr>
            <td>序列号</td>
            <td colspan ='3'>234721800000028</td>
        </tr>
        <tr>
            <td>名称</td>
            <td colspan ='3'>三轮028</td>
        </tr>
        <tr>
            <td>电压</td>
            <td>46V</td>
             <td>网络</td>
            <td>在线</td>
        </tr>
        <tr>
            <td colspan ='2'>设定时长(分钟)</td>
            <td colspan ='2'>30</td>
        </tr>
        <tr>
            <td><button>解锁</button></td>
            <td><button>锁定</button></td>
            <td><button>轨迹</button></td>
            <td><button>跟踪</button></td>
        </tr>
    </table>

        .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