今天来完成下面的表格
需要实现的表格
border设置表格边框
这个表格是有边框的，所以需要进行设置。
代码如下：
<table border="1"> </table>
caption 设置标题
可以看到这个表格是有一个标题，我们使用 caption 来添加表格的标题。
代码如下：
<table border="1">
<caption>购物车</caption>
</table>
这个运行结果就不写了。
实现一个简单的5行4列的表格
简单讲一下实现这个表格会用到哪些标签：
-
<tr>标签是来定义一行的 -
<th>标签定义表格中的表头 -
<td>标签定义表格中的一列 -
<thead>标签定义表格的页头 -
<tbody>标签定义表格的主体 -
<tfoot>标签定义表格的页脚
代码如下：
<table border="1">
<caption>购物车</caption>
<thead>
<tr>
<th>名称</th>
<th>2016-11-22</th>
<th></th>
<th>小计</th>
</tr>
<tr>
<th></th>
<th>重量</th>
<th>单价</th>
<th></th>
</tr>
</thead>
<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>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td></td>
<td></td>
<td>27元</td>
</tr>
</tfoot>
</table>
效果如下：
合并表格空白处
使用 colspan 和 rowspan 来合并。
colspan 是用来合并列
rowspan 是用来合并行
代码如下：
<table border="1">
<caption>购物车</caption>
<thead>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</tr>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
</thead>
<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>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td>27元</td>
</tr>
</tfoot>
</table>
运行效果：
这样就实现了这个表格。
