HTML表格

下面我们来完成下图表格的效果

table.png

Step 1

通过学习，可以得出如下结构图：

表格.png
注意：从实用角度出发，最好不要规定 frame，而是使用 CSS 来添加
从表格效果图中可以看出，整个表格由标题，表头，表项组成，其中存在单元格跨行和跨列，并且存在边框。

Step 2

标题是：“购物车”，
表头是：“名称”，“重量”，“单价”，“小计”，“2016-11-22”，“苹果”，“香蕉”，“总价”。其中“名称”，“小计”纵向跨越2行，“2016-11-22”横向跨越2列，“总价”横向跨越3列。
其余的是表项。
可以看出需要完成的表格是5行4列

Step 3

按照如下步骤完成该表格。

• 创建表格，并添加标题。代码如下：

<table >
    <caption>购物车</caption>
</table>

• 为表格添加边框。代码如下：

<table  border="1">
    <caption>购物车</caption>
</table>

• 形成5行4列的表格。代码如下：

<table border="1">
    <caption>购物车</caption>
    <tr>
        <th>名称</th>
        <th>2016-11-22</th>
        <th></th>
        <th>小计</th>
    </tr>
    <tr>
        <td></td>
        <th>重量</th>
        <th>单价</th>
        <td></td>
    </tr>
    <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>
    <tr>
        <th>总价</th>
        <td></td>
        <td></td>
        <td>27元</td>
    </tr>
</table>

执行效果如下：

5行4列.png

• 合并单元格，用colspan 和 rowspan。代码如下：

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

这样就完成该表格啦！
代码点这里
执行效果点这里