下面我们来完成下图表格的效果
table.png
Step 1
通过学习，可以得出如下结构图：
表格.png
注意：从实用角度出发，最好不要规定 frame，而是使用 CSS 来添加
从表格效果图中可以看出，整个表格由标题，表头，表项组成，其中存在单元格跨行和跨列，并且存在边框。
Step 2
标题是：“购物车”，
表头是：“名称”，“重量”，“单价”，“小计”，“2016-11-22”，“苹果”，“香蕉”，“总价”。其中“名称”，“小计”纵向跨越2行，“2016-11-22”横向跨越2列，“总价”横向跨越3列。
其余的是表项。
可以看出需要完成的表格是5行4列
Step 3
按照如下步骤完成该表格。
- 创建表格，并添加标题。代码如下：
<table >
<caption>购物车</caption>
</table>
- 为表格添加边框。代码如下：
<table border="1">
<caption>购物车</caption>
</table>
- 形成5行4列的表格。代码如下：
<table border="1">
<caption>购物车</caption>
<tr>
<th>名称</th>
<th>2016-11-22</th>
<th></th>
<th>小计</th>
</tr>
<tr>
<td></td>
<th>重量</th>
<th>单价</th>
<td></td>
</tr>
<tr>
<th>苹果</th>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<th>香蕉</th>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<th>总价</th>
<td></td>
<td></td>
<td>27元</td>
</tr>
</table>
执行效果如下：
5行4列.png
- 合并单元格，用colspan 和 rowspan。代码如下：
<table border="1">
<caption>购物车</caption>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</tr>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
<tr>
<th>苹果</th>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<th>香蕉</th>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<th colspan="3">总价</th>
<td>27元</td>
</tr>
</table>
