h5学习笔记:Table

h5学习笔记:Table_第1张图片

编写一个表格作为练习。当中有个比较重要的样式在学习过程中遇到,border-collapse: collapse; 能够去除双重的边框。table可以合并单元格所以 对td属性设置 colspan=”2” 则代表可以设置单元格。

table 当中thead, tbody, tfoot 都是table元素。使用thead代表表头 ,这个标签好处的无需关系位置。同样tfoot 也一样。

.mytable tr:nth-child(2n) 为隔开选取,这样就能够间隔地处理错开的颜色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Table 练习</title>
    </head>

    <style> .mytable { width: 800px; height: auto; margin: 0 auto; } .mytable table { width: 100%; border: 1px solid #999; padding: 0; margin: 0; border-collapse: collapse; } .mytable th { height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #999; padding: 0; margin: 0; } .mytable td { height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #999; padding: 0; margin: 0; } .mytable tr:hover { background-color: #f8f8f8; } .mytable tr:nth-child(2n) { background-color: #f8f8f8; } .mytable tfoot { width: 100%; } .mytable tfoot a{ text-decoration: none; color: #999; } </style>

    <body>

<div class="mytable">
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>电话</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小米</td>
                <td>未知</td>
                <td>1234567</td>
                <td>火星文明</td>
            </tr>
            <tr>
                <td>华为</td>
                <td>未知</td>
                <td>1234567</td>
                <td>火星文明</td>
            </tr>
            <tr>
                <td>三星</td>
                <td>未知</td>
                <td>1234567</td>
                <td>火星文明</td>
            </tr>
            <tr>
                <td>苹果</td>
                <td>未知</td>
                <td>1234567</td>
                <td>火星文明</td>
            </tr>
        </tbody>
        <tfoot> 
              <tfoot>
                <tr>                 
                    <td><a href="#" class="more">上一页</a></td>
                    <td colspan="1"><a href="#" class="more">下一页</a></td>
                    <td colspan="2"></td>
                </tr>
              </tfoot>
        </tfoot>        
    </table>

</div>
    </body>
</html>

你可能感兴趣的:(h5学习笔记:Table)