zoukankan      html  css  js  c++  java
  • CSS表格

    1.指定一个表的Th,TD元素和黑色边框

    table,th,td {
        border: 1px solid black;
    }
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
            </tr>
            <tr> 
                <td>Peter</td>
                <td>Griffin</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
            </tr>
        </table>
    </body>

    2.使用border-collapse

    table {
        border-collapse: collapse; /* 边框塌陷*/
    }
    table,th,td {
        border: 1px solid black;
    }
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
            </tr>
            <tr> 
                <td>Peter</td>
                <td>Griffin</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
            </tr>
        </table>
    </body>

    3.指定表格的宽度和高度

    table,td,th {
        border:1px solid black;
    }
    table {
        width:100%;
    }
    th {
        height:50px;
    }
    <body>
    <table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
    </tr>
    <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
    </tr>
    <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
    </tr>
    <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
    </tr>
    </table>
    </body>

    4.设置内容的水平对齐方式(文本对齐)

    table,th,td {
        border: 1px solid black;
    }
    td {
        text-align: right;
    }
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                 <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>

    5.设置内容的垂直对齐(垂直对齐)

    table,th,td {
        border: 1px solid black;
    }
    td{
        height: 50px;
        vertical-align: bottom;
    }
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                 <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>

    7.指定TH和TD元素的填充

    table,th,td {
        border: 1px solid black;
    }
    td {
        padding: 15px;
    }
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                 <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>

    8.指定表格边框的颜色

    table,th,td {
        border: 1px solid green;
    }
    th {
        background-color: green;
        color: white;
    }
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                 <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>

    9.设置表格标题的位置

    caption {
        caption-side: bottom;
    }
    table,th,td {
        border: 1px solid green;
    }
    <body>
        <table>
            <caption>Table 1.1 Customers</caption>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                 <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>

    10.创建一个奇特的表

    #customers
    {
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        width:100%;
        border-collapse:collapse;
    }
    #customers td, #customers th 
    {
        font-size:1em;
        border:1px solid #98bf21;
        padding:3px 7px 2px 7px;
    }
    #customers th 
    {
        font-size:1.1em;
        text-align:left;
        padding-top:5px;
        padding-bottom:4px;
        background-color:#A7C942;
        color:#ffffff;
    }
    #customers tr.alt td 
    {
        color:#000000;
        background-color:#EAF2D3;
    }
    <body>
    <table id="customers">
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    </tr>
    <tr class="alt">
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
    </tr>
    <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    </tr>
    <tr class="alt">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    </tr>
    <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    </tr>
    <tr class="alt">
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
    </tr>
    <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    </tr>
    <tr class="alt">
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    </tr>
    <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
    </tr>
    <tr class="alt">
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
    </tr>
    </table>
    </body>
  • 相关阅读:
    hive 数据hadoop数据etl交换
    团队冲刺(三)
    团队冲刺(二)
    CVPR2019论文热词云的实现
    团队冲刺(一)
    团队开发之电梯演讲----团队项目介绍--“益青春APP”
    android的finish()方法
    java web项目通过外网ip访问
    MySQL出现错误1205-Lock wait timeout exceeded; try restarting transaction
    团队开发(自己的理解)
  • 原文地址:https://www.cnblogs.com/Tony98/p/10964467.html
Copyright © 2011-2022 走看看