CSS表格样式

韵然CP

于 2019-06-26 11:09:26 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaWeb

本文链接：https://blog.youkuaiyun.com/qq_40354578/article/details/93722061

JavaWeb 专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了一个使用HTML和CSS创建并美化表格的例子，包括如何设置表格宽度、边框样式、背景颜色以及文字颜色，同时展示了如何通过不同的CSS类来区分表格中的信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
    <style>
        table,th,td{
            border: 1px lightblue solid;
            border-collapse: collapse;
        }
        table{
            width:80%;
            margin: 0px auto;
        }
        th,td{
            padding: 10px;
        }
        th{
            background-color: aqua;
            color: #000;
        }
        .info{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>名称</th>
            <th>职位</th>
            <th>收入</th>
        </tr>
        <tr class="info">
            <td>张无忌</td>
            <td>老板</td>
            <td>100000</td>
        </tr>
        <tr class="info">
                <td>小昭</td>
                <td>秘书</td>
                <td>10000</td>
            </tr>
            <tr>
                    <td>周芷若</td>
                    <td>主管</td>
                    <td>20000</td>
                </tr>
        </table>
</body>
</html>