HTML_实现一个简单表格

一、任务目标

预期效果图

二、任务分解

• 首先是一个表格，边框为1，标题为 “ 购物车 ”
• 其次分为标题（th）和内容（tbody）
• 标题两行，内容三行，一共是五行四列
• 其中包含行合并（colspan）和列合并（rowspan）

三实现

• 代码：

<div align="center">
<p>购物车</p>
<table border="1">
  <tr>
    <th rowspan="2">名称</th>
    <th colspan="2">2016-11-22</th>
    <th rowspan="2">小计</th>
  </tr>
  <tr>
    <th>重量</th>
    <th>单价</th>
  </tr>
  <tbody>
   <tr>
    <td>苹果</td>
    <td>3公斤</td>
    <td>5元/公斤</td>
    <td>15元</td>
   </tr>
   <tr>
    <td>香蕉</td>
    <td>2公斤</td>
    <td>6元/公斤</td>
    <td>12元</td>
   </tr>
   <tr>
    <td colspan="3">总价</td>
    <td>27元</td>
   </tr>
  </tbody>
</table>
</div>

• 效果图：

自己实现的效果图

四、总结

• 通过任务分解，很清楚的知道了具体要做的步骤，实现起来很容易