一. 所要实现的表格
购物车表格
二 .实现过程
分析第一步
- 是一个5行4列的表格
- 表格样式 border 宽为1px ,文字居中
代码实现如下
<table border="1" style="text-align: center">
<caption>购物车</caption>
<tr>
<th>名称</th>
<th>2016-11-22</th>
<th></th>
<th>小计</th>
</tr>
<tr>
<th></th>
<th>重量</th>
<th>单价</th>
<th></th>
</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></td>
<td></td>
<td>27元</td>
</tr>
</table>
此时，页面效果为：
页面初步效果
分析第二步
发现与要实现的表格不一样，原因是没有合并单元格
colspan 合并列单元格
rowspan合并行单元格
运用合并单元格后，页面效果为：
合并单元格后
好了，表格实现完毕。
每天都努力一点
谢谢你看完
