在上一篇文章中我们介绍了列表的实现，戳这里列表实现。
在网页中，我们经常能看到各式各样的表格，所以我们就来学习一下表格的常用标签和实现。今天要实现的表格是这个样子的。
目标表格
分析：
从大的方面讲，这个表格由页头，主体和页脚三部分构成，细节上表格有表名，边框，并且有些表项会出现跨行跨列的情况，同时表格中的文字全部居中。
预备知识：
- 表格基本的标签
| 标签 | 含义 |
|---|---|
| <table> | 定义HTML文档中的表格 |
| <thead> | 定义表格的页头 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
| <tr> | 定义表格中的一行 |
| <th> | 定义表格中的表头 |
| <td> | 定义表格中的一列 |
| caption | 给表格设置标题 |
- 表名的设置
<table>
<caption>购物车</caption>
</table>
- 边框的设置
<table border="1"> </table>
border后面的这个参数代表边框的宽度，根据实际需要可以选择1、2、3等数字。
- 跨行跨列的处理
colspan和rowspan分别设置表格占用标准表格的几列和几行，
<td rowspan="2">名称</td> 名称占两行
<td colspan="2">总价</td> 总价占两列
- 文字居中
在标签thead、tbody和tfoot中，分别加上align="center"
<thead align="center"></thead>
<tbody align="center"></tbody>
<tfoot align="center"></tfoot>
实现过程
- 首先，我们实现表名和表格的head部分，具体代码如下：
<body>
<table border="2">
<caption>购物车</caption>
<thead align="center">
<tr>
<td rowspan="2">名称</td>
<td colspan="2">2016-11-22</td>
<td rowspan="2">小计</td>
</tr>
<tr>
<td>重量</td>
<td>单价</td>
</tr>
</thead>
</table>
</body>
效果图如下：
第一步效果图
- 接着，实现表格的body部分，body部分代码如下：
<tbody align="center">
<tr>
<td>苹果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>２公斤</td>
<td>６元/公斤</td>
<td>1２元</td>
</tr>
</tbody>
第二步效果图如下：
第二步效果图
- 最后，实现表格的foot部分，foot部分代码如下：
<tfoot align="center">
<tr>
<td colspan="3">总价</td>
<td>27元</td>
</tr>
</tfoot>
最终的效果图：
最终效果图
本文的全部代码在github中可以查看。
