h5学习笔记：Table

最新推荐文章于 2024-06-29 23:26:25 发布

hero82748274

最新推荐文章于 2024-06-29 23:26:25 发布

阅读量8.5k

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/51344015

版权

javascript和Egret相关专栏收录该内容

97 篇文章 4 订阅

订阅专栏

这里写图片描述

编写一个表格作为练习。当中有个比较重要的样式在学习过程中遇到，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>