HTML基础之表格

明确目标

我们需要实现这样的表格

目标.png

任务列表

1.设定表格边框和加上标题
2.实现一个类似目标表格的表格
3.合并表格以及把该居中的表格数据居中
4.加粗字体

任务拆分

1.首先先将表格的框框给设定好，以及写上表格的标题

<table border="1">//border负责设置边框大小，也可以设置边框的其他属性
    <caption>购物车</caption>//caption是责设置表格标题及将标题居中
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
</table>

运行结果

运行结果.png

2.因为这是一个四行四列的表格，所以我们先将表格实现出来

<table border="1">
    <caption>购物车</caption>
    <tr>//每个表格行由 tr 标签开始
        <td>名称</td>//每个表格数据由 td 标签开始
        <td>2016-11-22</td>
        <td>
 </td>
        <td>小计</td>
    </tr>
    <tr>
        <td> </td>
        <td>重量</td>
        <td>单价</td>
        <td> </td>
    </tr>
    <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>
    <tr>
        <td>总价</td>
        <td> </td>
        <td> </td>
        <td>27元</td>
    </tr>
</table>

运行结果

初步表格.png

3.接下来我们负责合并表格并把该居中的表格数据居中

<tr>
    <td rowspan="2">名称</td>//rowspan是负责横跨列单元格的，至于横跨几格可以自己设置
    <td colspan="2">2016-11-22</td>//colspan是负责横跨行单元格的，也是可以自己设置
    <td rowspan="2">小计</td>
</tr>
<tr> 
    <td colspan="3" align="center">总价</td>//align是负责将表格数据定位的，这里我们将数据设为居中
    <td>27元</td>
</tr>

运行结果

合并.png

4.将该加粗的字体加粗

<tr>
    <th rowspan="2">名称</th>//将td改为th便可以将字体加粗了
    <th colspan="2">2016-11-22</th>
    <th rowspan="2">小计</th>
</tr>

最后整合一下代码便可以得到目标表格了。
用词不够严谨若有错误之处欢迎指出。