一个简单表格的创建
创建一个HTML表格需要三个元素，这三个元素结合使用就可以创建一个HTML表格。
第一个元素用来标记表格主体，第二个元素用来标记表格的行，第三个元素用来标记列。
第一步：
把整个表格放到一个< table>元素中。
把每个表格内容放到各自的< table>元素中创建表格。这意味着把内容放在< table>和< /table>之间。
<table>
我是一个表格
</table>
第二步：
把每行的内容放到一个< tr>元素中
第三步：
把每列的元素放到一个< td>元素中
<table border="1">
<tr>
<th>名称</th>
<th>重量</th>
<th>单价</th>
<th>小计</th>
</tr>
<tr>
<th>苹果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th>香蕉</th>
<th>2公斤</th>
<th>6元/公斤</th>
<th>12元</th></tr>
</table>
运行结果：
简单表格
表格的行和列的合并
我们已经实现了一个简单的表格，但是在很多的地方，我们年还需要将表格的行和列进行合并，构造复杂的表格。
colspan和rowspan分别设置表格的占用标准表格的几行和几列，使用如下：
<table border="1">
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
</tr>
<tr>
<th>苹果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th>香蕉</th>
<th>2公斤</th>
<th>6元/公斤</th>
<th>12元</th>
</tr>
<tr>
<th colspan="3">总计</th>
<th>27元</th>
</tr>
</table>
运行结果：
表格行列的合并
表格标题
我们一般制作的表格都会有一定的主题，那我们就需要给表格添加标题
caption标签:给表格设置标题，在<table>标签内添加标题。如下：
<table border="1">
<caption>购物清单</caption>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
</tr>
<tr>
<th>苹果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th>香蕉</th>
<th>2公斤</th>
<th>6元/公斤</th>
<th>12元</th>
</tr>
<tr>
<th colspan="3">总计</th>
<th>27元</th>
</tr>
</table>
运行结果：
表格标题
到此，我的这个表格就实现了。
但是，在完成的过程中我发现了一些问题，如下：
- < th>和< td>的区别：
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示，表格中的文字将居中显示。在表格中也可以不用此标签，<th>标签必须放在<tr>标签内。
<td>...</td>定义单元格标签，一组<td>标签将建立一个单元格，<td>标签必须放在<tr>标签内。
示例如下：
<table border="1">
<tr>
<th>名称</th>
<th>重量</th>
<th>单价</th>
<th>小计</th>
</tr>
<tr>
<th>苹果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th colspan="3">总计</th>
<th>27元</th>
</tr>
<tr>
<td colspan="3">总计</td>
<td>27元</td>
</tr>
</table>
运行结果：
th与td的区别
