HTML学习之表格

实现如下表格

分析：

该表格为五行四列，其中头部包括两行，内容为两行，最后一行为统计的内容；
  其中“名称”、“2016-11-22”、“重量”、“单价”、“小计”、“苹果”、“香蕉”、“总价”均加粗可视为标题，
  第一行中时间横跨两列，最后一行中“总价”横跨三列；
  第一行的“名称”竖跨两行，最后一列中的“小计”竖跨两行。

代码内容

<table border="1">
    <theader>
        <tr>
            <th rowspan="2">名称</th>
            <th colspan="2">2016-11-22</th>
            <th rowspan="2">小计</th>
        </tr>
        <tr>
            <th>重量</th>
            <th>单价</th>
        </tr>
    </theader>
    <tbody>
        <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>
    </tbody>
    <tfoot>
        <th colspan="3">总价</th>
        <td>27元</td>
    </tfoot>
</table>

代码分析：

通过colspan以及rowspan实现跨列和跨行；
  使用th标签达到加粗的标题