符合Web标准的表格——CSS表格

原创

mb61b856e04bb98 2021-12-16 17:47:39 ©著作权

文章标签 css 属性设置软件工程 文章分类 运维

©著作权归作者所有：来自51CTO博客作者mb61b856e04bb98的原创作品，请联系作者获取转载授权，否则将追究法律责任

【前言】

Web标准并不等同于DIV＋CSS，网页设计中，很多地方，仍然需要使用表格，特别是在呈现一些表格数据的时候。

【实例】

一、效果

二、HTML

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>专业</th>
        <th>年级</th>
        <th>系别</th>
    </tr>
    <tr>
        <td>郑春磊</td>
        <td>20</td>
        <td>男</td>
        <td>软件工程</td>
        <td>大一</td>
        <td>计算机系</td>
    </tr>
    <tr>
        <td>李肃文</td>
        <td>21</td>
        <td>男</td>
        <td>软件工程</td>
        <td>大一</td>
        <td>计算机系</td>
    </tr>
</table>

三、CSS

body
{
    margin: 0;
    padding: 0;
}
table
{
    border-collapse: collapse;
    border-spacing: 0px;
}
th, td
{
    margin: 0;
    padding: 0;
}
table
{
    margin: 0 auto;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    margin-top: 10px;
    text-align: center;
}
td, th
{
    padding: 3px;
    border: 1px solid #000;
    border-width: 0 1px 1px 0;
    text-align: left;
    font-size: 12px;
}
th
{
    text-align: center;
    font-weight: 600;
    background-color: #F4F4F4;
}