商品信息表(表格的应用)

关键点:

• colspan 列合并

• rowspan 行合并

案例代码:

<table border="1" width="80%" cellspacing="0" cellpadding="5">
    <caption>
        商品信息表
    </caption>
    <thead>
        <tr>
            <th>id</th>
            <th>品类</th>
            <th>品名</th>
            <th>数量</th>
            <th>价格</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody align="center">
        <tr>
            <td>1</td>
            <td rowspan="3">珠宝</td>
            <td>翡翠</td>
            <td>1</td>
            <td>20000</td>
            <td>20000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>玛瑙</td>
            <td>2</td>
            <td>3000</td>
            <td>6000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>琥珀</td>
            <td>10</td>
            <td>500</td>
            <td>50000</td>
        </tr>
        <tr>
            <td>4</td>
            <td>手串</td>
            <td>檀香</td>
            <td>2</td>
            <td>200</td>
            <td>400</td>
        </tr>
    </tbody>
    <tfoot align="center">
        <tr>
            <td colspan="2"><strong>合计</strong></td>
            <td><strong>总数</strong></td>
            <td>15</td>
            <td><strong>总金额</strong></td>
            <td>76400</td>
        </tr>
    </tfoot>
</table>

效果图