CSS踩坑（3）表格初探

在W3cschool学习了一下CSS关于表格的知识，现在分享一下小白表格制作过程。

按照教程源码我先做了一下
在这里插入图片描述
界面是这样的：
原教程以 #customer进行了CSS编写
它设计了
#customer{ }
#customer th{ }
#customer td{ }
#customer tr.alt { }
一开始不太理解tr.alt是做啥的，后来知道这是tr的一个名为alt的类，和tr本身相比，内容的背景颜色和字体颜色不同，正如表格图片展示的那样

HTML里相匹配的是<table id="customer">

然后我用.customer进行了CSS编写
.customer{ }
th{ }
td{ }
tr.alt{ }
HTML里相匹配的是<table class="customer">

二者效果完全相同

对了，CSS中#customer th,td{ }的border（边框属性）颜色前记得加solid，不然不显示
border: solid cornflowerblue 1px;

下面上代码：
1）用 #customer编写的
CSS:

h1{
    text-align: center;
    font-size: 3em;
}

#customer{
    width: 80%;
    border-collapse: collapse;
    margin: auto;
    margin-top: 50px;
}

#customer th,td{
    border: solid cornflowerblue 1px;
    padding: 8px;
    text-align: center;
}

#customer th{
    font-size: 2em;
    padding-top: 10px;
    padding-bottom: 2px;
    background-color: burlywood;
    color: white;
}

#customer tr.alt {
    color: brown;
    background-color: beige;
    text-align: center;
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS表格pro</title>
    <link rel="stylesheet" href="../CSS/0106_02.css">
</head>

<body>
<h1>这是一个表格</h1>

<!--#customer与id搭配
如果是.customer与class搭配-->

<table id="customer">
    <tr>
        <th>company</th>
        <th>contact</th>
        <th>country</th>
    </tr>

    <tr>
        <td>Apple</td>
        <td>Steven Jobs</td>
        <td>USA</td>
    </tr>

    <tr class="alt">
        <td>Baidu</td>
        <td>Li YanHong</td>
        <td>China</td>
    </tr>

    <tr>
        <td>Google</td>
        <td>Larry Page</td>
        <td>USA</td>
    </tr>

    <tr class="alt">
        <td>Lenovo</td>
        <td>Liu Chuanzhi</td>
        <td>China</td>
    </tr>

    <tr>
        <td>Microsoft</td>
        <td>Bill Gates</td>
        <td>USA</td>
    </tr>

    <tr class="alt">
        <td>Nokia</td>
        <td>Stephen Elop</td>
        <td>Finland</td>
    </tr>
</table>

</body>
</html>

2）用.customer 编写的
CSS:

h1{
    text-align: center;
    font-size: 3em;
}
.customer{
    width: 80%;
    border-collapse: collapse;
    margin: auto;
    margin-top: 50px;
}

th,td{
    border: solid cornflowerblue 1px;
    padding: 8px;
    text-align: center;
}

th{
    font-size: 2em;
    padding-top: 10px;
    padding-bottom: 2px;
    background-color: burlywood;
    color: white;
}

tr.alt{
    color: brown;
    background-color: beige;
    text-align: center;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS表格pro2.0</title>
    <link rel="stylesheet" href="../CSS/0106_03.css">
</head>

<body>
<h1>这是一个表格</h1>
<table class="customer">
    <tr>
        <th>company</th>
        <th>contact</th>
        <th>country</th>
    </tr>

    <tr>
        <!--        每另起一行需要加一个tr标签包起来-->
        <td>Apple</td>
        <td>Steven Jobs</td>
        <td>USA</td>
    </tr>

    <tr class="alt">
        <td>Baidu</td>
        <td>Li YanHong</td>
        <td>China</td>
    </tr>

</table>
</body>
</html>

qwe122343

发布了20 篇原创文章 · 获赞 17 · 访问量 477

私信关注

CSS踩坑（3）表格初探

猜你喜欢