分享一个简单的table css

最新推荐文章于 2025-05-02 14:48:14 发布

原创最新推荐文章于 2025-05-02 14:48:14 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

这段代码展示了一个如何使用CSS来定义HTML表格的样式，包括设置字体、颜色、边框和背景色。表格的thead和td元素都有特定的样式，使得表格具有专业且清晰的视觉效果。

原网站 w3cSchool

https://www.w3cschool.cn/css/css-sfrk2opy.html

效果

代码如下：


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <style type="text/css">
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

            table.gridtable th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #3595da;
            }

          table.gridtable td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #ffffff;
            }
    </style>

</head>
<body>
    <div>
        <table class="gridtable">
            <tr>
                <th>item</th>
                <th>1-1</th>
                <th>1-2</th>
                <th>1-3</th>
            </tr>
            <tr>
                <td>可乐</td>
                <td>1.5</td>
                <td>1.4</td>
                <td>1.6</td>
            </tr>
            <tr>
                <td>雪碧</td>
                <td>1.8</td>
                <td>1.7</td>
                <td>1.5</td>
            </tr>
        </table>
    </div>
</body>
</html>