HTML实现表格

任务内容

用html实现以下内容

任务拆分

• 显示表格
• 合并单元格

<table>学习

在w3school学习了一下<table>，感觉受益匪浅。

实现任务

• 显示表格
  代码如下：

<table border="1">
    <caption>购物车</caption>
    <tr>
        <td>名称</td>
        <td>2016-11-22</td>
        <td>小计</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>重量</td>
        <td>单价</td>
        <td></td>
    </tr>
    <tr>
        <td>苹果</td>
        <td>３公斤</td>
        <td>５元/公斤</td>
        <td>15元</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>２公斤</td>
        <td>６元/公斤</td>
        <td>12元</td>
    </tr>
    <tr>
        <td>总价</td>
        <td>27元</td>
        <td></td>
        <td></td>
    </tr>
</table>

显示效果：

• 合并单元格
  代码如下：

<table border="1">
    <caption>购物车</caption>
    <tr>
        <td rowspan="2">名称</td>
        <td colspan="2">2016-11-22</td>
        <td rowspan="2">小计</td>
    </tr>
    <tr>
        <td>重量</td>
        <td>单价</td>
    </tr>
    <tr>
        <td>苹果</td>
        <td>３公斤</td>
        <td>５元/公斤</td>
        <td>15元</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>２公斤</td>
        <td>６元/公斤</td>
        <td>12元</td>
    </tr>
    <tr>
        <td colspan="3">总价</td>
        <td>27元</td>
    </tr>
</table>

显示效果：

总结

分解任务还是很重要