css表格练习

最新推荐文章于 2023-04-04 19:23:11 发布

sunhuwh

最新推荐文章于 2023-04-04 19:23:11 发布

阅读量573

点赞数

分类专栏： # css 文章标签： css

本文链接：https://blog.csdn.net/sunhuwh/article/details/52449642

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>一个美丽的表格</title>
    <style type="text/css">
        table,thead,tr,td {
            /* 设置边框样式 */
            border: 1px solid green;
            border-collapse:collapse;
            width: 100%;
        }

        td {
            width: 33%;
            height:30px;    
            /* 设置字体 */  
            font-family:Arial, Helvetica, sans-serif;
            /* 设置元素距离边框的距离 */
            padding: 7px;
        }

        thead td {
            color: white;
            background-color: #A7C942;
            /* 设置字体 */
            font-family: 'Arial Black', Gadget, sans-serif;
            padding: 12px;
        }

        .tr_1 {
            background-color: white;
        }

        .tr_2 {
            background-color: #eaf2d3;
        }


    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td class="th_1">Company</td>
                <td class="th_2">Contact</td>
                <td class="th_3">Country</td>
            </tr>
        </thead>
        <tbody>
            <tr class="tr_1">
                <td>Apple</td>
                <td>Steven Jobs</td>
                <td>USA</td>
            </tr>       
            <tr class="tr_2">
                <td>Baidu</td>
                <td>Li YanHong</td>
                <td>China</td>
            </tr>
            <tr class="tr_1">
                <td>Google</td>
                <td>Larry Page</td>
                <td>USA</td>
            </tr>
            <tr class="tr_2">
                <td>Lenovo</td>
                <td>Liu Chuanzhi</td>
                <td>China</td>
            </tr>
            <tr class="tr_1">
                <td>Microsoft</td>
                <td>Bill Gates</td>
                <td>USA</td>
            </tr>
            <tr class="tr_2">
                <td>Nokia</td>
                <td>Stephen Elop</td>
                <td>Finland</td>
            </tr>
        </tbody>
    </table>
</body>
</html>