一、任务目标
预期效果图
二、任务分解
- 首先是一个表格，边框为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>
- 效果图：
自己实现的效果图
四、总结
- 通过任务分解，很清楚的知道了具体要做的步骤，实现起来很容易
