商品信息表

代码效果预览图

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    table{
        border: 1px solid #ccc;
        border-collapse: collapse;
        text-align: center;
    }
    td{
        width: 100px;
        height: 50px;
        border: 1px solid #ccc;
    }
    </style>
</head>
<body>
    <table>
        <!-- 表头 -->
        <thead >
            <tr style="color: #ff6700;background-color: #f3f3f3;">
                <td>ID</td>
                <td>分类</td>
                <td>商品分类</td>
                <td>价格</td>
                <td>数量</td>
                <td>金额</td>
            </tr>
        </thead>
        <!-- 表体 -->
        <tbody>
            <tr>
                <td>1</td>
                <td rowspan="3">水果</td>
                <td>葡萄</td>
                <td>10元/斤</td>
                <td>12</td>
                <td>120元</td>
            </tr>
            <tr>
                <td>2</td>
                <!-- <td>水果</td> -->
                <td>西瓜</td>
                <td>5元/斤</td>
                <td>5</td>
                <td>25元</td>
            </tr>
            <tr>
                <td>3</td>
                <!-- <td>水果</td> -->
                <td>火龙果</td>
                <td>8元/斤</td>
                <td>5</td>
                <td>40元</td>
            </tr>
            <tr>
                <td>4</td>
                <td rowspan="2">蔬菜</td>
                <td>南瓜</td>
                <td>5元/斤</td>
                <td>3</td>
                <td>15元</td>
            </tr>
            <tr>
                <td>5</td>
                <!-- <td>蔬菜</td> -->
                <td>香菜</td>
                <td>2元/斤</td>
                <td>4</td>
                <td>8元</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">总计</td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
                <td>29</td>
                <td>208元</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：<thead >中可以直接使用<th>,这样就没必要在css中居中了

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

商品信息表

2021-07-01 13:46:20