21表格的样式

最新推荐文章于 2024-07-25 02:11:29 发布

StudiousTiger

最新推荐文章于 2024-07-25 02:11:29 发布

阅读量123

点赞数

文章标签： css3 html5 html css

本文链接：https://blog.csdn.net/m0_45067620/article/details/107168878

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 50%;
            border: 1px black solid;

            /* 设置边框之间的距离 ，当为0时，是将两个边框合在一起（2个像素）*/
            /* border-spacing: 10px; */

            /* 设置边框的合并（1个像素） */
            border-collapse: collapse;
        }
        td{
            border: 1px black solid;
            height: 50px;
            /* 默认情况下tr中的文字是垂直居中的，所以我们可以一下的属性进行调整文字的位置 */
            /* vertical-align: ;
            text-align: ; */
            text-align: center;
        }

        /* 
         注意：如何表格中没有使用table而是直接使用了tr，那么浏览器会自动创建一个tbody,并且将tr全部放入tbody
               所以，tr不是table的个元素，而是tbody的子元素
         */
        
        /* 给奇数行设置yanse */
        tr:nth-child(odd){
            /* 或者 :nth-child(2n+1)*/
            background-color: rgb(74, 182, 182);
        }
        tr:nth-child(even){
            /* 或者 :nth-child(2n)*/
            background-color: rgb(22, 197, 124);
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>学号</th>
            <th>性别</th>
            <th>年龄</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>01</td>
            <td>male</td>
            <td>20</td>
            <td>china</td>
        </tr>
        <tr>
            <td>02</td>
            <td>male</td>
            <td>21</td>
            <td>china</td>
        </tr>
        <tr>
            <td>03</td>
            <td>male</td>
            <td>26</td>
            <td>china</td>
        </tr>
        <tr>
            <td>04</td>
            <td>female</td>
            <td>18</td>
            <td>china</td>
        </tr>
    </table>
</body>
</html>

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
21表格的样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{
复制链接

扫一扫

专栏目录