CSS 基础教程-053 CSS 制作一个漂亮的表格

由 hrs, 6 二月, 2020

实例代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css">
        table,th,td{border:1px solid green;}
        th,td{width:200px;padding:5px;height:30px;}
        table{border-collapse:collapse;font-size:20px;}
        th{background-color:#98bf21;color:#ffffff;}
        /*tr 从第三行的奇偶数行样式*/
    tr:nth-child(2n+3){background-color:#EAF2D3;}
    </style>
</head>
<body>
    <h1>制作一个漂亮的表格</h1>
    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Apple</td>
            <td>Steven Jobs</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Baidu</td>
            <td>Li YanHong</td>
            <td>China</td>
        </tr>
        <tr>
            <td>Google</td>
            <td>Larry Page</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Lenovo</td>
            <td>Liu Chuanzhi</td>
            <td>China</td>
        </tr>
        <tr>
            <td>Microsoft</td>
            <td>Bill Gates</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Nokia</td>
            <td>Stephen Elop</td>
            <td>Finland</td>
        </tr>
    </table>
</body>
</html>

运行效果：

css_053.png

标签

评论