HTML 表格实现

今天来完成下面的表格

需要实现的表格

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>

运行效果：

这样就实现了这个表格。