0629作业

使用html写一个商品信息表，要求有id，品名，价格，数量，金额等字段，最后要有合计，如总数，总金额，并且商品按品类进行合并显示，要求用到行与列的合并

html 运行结果

html浏览器运行结果

html 代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品信息表</title>
</head>
<body>
    <table border="1" width="80%" cellspacing="0" cellpadding="5">
        <!-- 标题 -->
        <caption><strong>商品信息表</strong></caption>
        <!-- 表头 -->
        <thead >
            <tr bgcolor="lightblue">
                <th>id</th>
                <th>品名</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>        
        <!-- 表体 -->    
        <tbody>
            <tr>
                <td>1</td>
                <td rowspan="3" >电子产品</td>
                <td>Lenovo Thinkpad T14笔记本</td>
                <td>6000</td>
                <td>20</td>
                <td>120000</td>
            <tr>
                <td>2</td>
                <!-- <td>电子产品</td> -->
                <td>小米10S手机</td>
                <td>2000</td>
                <td>20</td>
                <td>40000</td>
            </tr>
            <tr>
                <td>3</td>
                <!-- <td>电子产品</td> -->
                <td>小米无线蓝牙耳机</td>
                <td>300</td>
                <td>10</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>4</td>
                <td rowspan="2">家电</td>
                <td>格兰仕微波炉</td>
                <td>500</td>
                <td>10</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>5</td>
                <!-- <td>家电</td> -->
                <td>美的电饭煲</td>
                <td>500</td>
                <td>10</td>
                <td>5000</td>
            </tr>
        </tbody>
        <!-- 表尾 -->
        <tfoot>
            <tr bgcolor="lightblue">
                <td colspan="4" align="center">合计</td>
                <td>70</td>
                <td>173000</td>
            </tr>
        </tfoot> 
    </table>
</body>
</html>

0629作业

0629作业

html 运行结果

html 代码块

相关文章