HTML之表格

一个简单表格的创建

创建一个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的区别