css学习之二表格

最新推荐文章于 2023-07-22 15:42:43 发布

Henry_Jing

最新推荐文章于 2023-07-22 15:42:43 发布

阅读量423

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/JCY1009015337/article/details/53470540

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图如下：

代码如下：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <table id="tb">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr class="alt">
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr class="alt">
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

css（style.css）

#tb{
    width:500px;
    /*border-collapse用来合并边框*/
    border-collapse: collapse;
}
#tb td,#tb th{
    text-align: center;
    border: 1px solid #ffac3b;
    padding: 5px;
}
#tb th{
    background-color: aqua;
    color: #fFffff;
}
#tb tr.alt td{
    color: #000000;
    background-color:aquamarine;
}