任务内容
用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>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td>6元/公斤</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>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>
</table>
显示效果:
总结
分解任务还是很重要