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

作者: 胆小的米老鼠 | 来源:发表于2018-08-28 08:51 被阅读4次

创建表格样式：

<!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>