css学习第二天--表格样式

创建表格样式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格样式</title>
    <!--定义类样式,层级样式-->
    <style type="text/css">
        .goods_list{
            width:600px;
            height:200px;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            border: 1px solid #333;  
            border-collapse: collapse;

        }

        .goods_list th, .goods_list td {
            border: 1px solid #333;
            text-align: center;
        }
        .goods_list th{
            background-color: #3366cc;
            color: #ffffff;
        }


    </style>
</head>
<body>
    <!--定义样式后 ,在表格里用class标签引用-->
<table class="goods_list">
    <tr>
        <th>名称</th>
        <th >重量</th>
        <th>价格</th>
        <th>状态</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>1kg</td>
        <td>$0.8</td>
        <td>正常</td>
    </tr>
    <tr>
        <td>桔子</td>
        <td>10Kg</td>
        <td>$1</td>
        <td>正常</td>
    </tr>
</table>
    
</body>
</html>

展示效果:

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。