表格样式

表格样式

序号名称数量价格备注
1 苹果 1000 ￥5.00 销售
1 苹果 1000 ￥5.00 销售
1 苹果 1000 ￥5.00 销售
1 苹果 1000 ￥5.00 销售
1 苹果 1000 ￥5.00 销售 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格样式</title>
    <style text="text/css">
        .goods_list{
            width: 600px;
            height: 200px;
            border: 1px solid #555;
            border-collapse: collapse; 
            <!-- 设置边框现合并 --> 
            font-family: 'Microsoft Yahei';
            <!-- 设置字体 --> 
        }
        .goods_list th,.goods_list td{
            border: 1px solid #111;
            <!-- 设置边框线像素 --> 
            text-align: center; 
            <!-- 设置表格文字居中 --> 


        }
        .goods_list th{
            background-color: #3366cc;
            <!-- 设置表头背景色 --> 
            color: #ffffff
            <!-- 设置表头字体颜色 --> 

        }


    </style>
</head>
<body>
    <table class="goods_list">
        <tr>
            <th>序号</th>
            <th>名称</th>
            <th>数量</th>
            <th>价格</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>1</td>
            <td>苹果</td>
            <td>1000</td>
            <td>￥5.00</td>
            <td>销售</td>
        </tr>
        <tr>
            <td>1</td>
            <td>苹果</td>
            <td>1000</td>
            <td>￥5.00</td>
            <td>销售</td>
        </tr>
        <tr>
            <td>1</td>
            <td>苹果</td>
            <td>1000</td>
            <td>￥5.00</td>
            <td>销售</td>
        </tr>
        <tr>
            <td>1</td>
            <td>苹果</td>
            <td>1000</td>
            <td>￥5.00</td>
            <td>销售</td>
        </tr>
        <tr>
            <td>1</td>
            <td>苹果</td>
            <td>1000</td>
            <td>￥5.00</td>
            <td>销售</td>
        </tr>
        
    </table>
    
</body>
</html>

 

posted @ 2017-12-17 16:11  mrwuzs  阅读(326)  评论(0)  编辑  收藏  举报