今天要实现的表格是这样的
目标表格
设置表格的边框
可以看出这个表格是有边框的，所以我们需要设置border
<table border="2"> </table>
设置表格的题目
我们使用caption 来添加表格的标题。
<table border="1">
<caption>购物车</caption>
</table>
实现表格
表格会用到哪些标签：
-
<tr>标签是来定义一行的 -
<th>标签定义表格中的表头 -
<td>标签定义表格中的一列 -
<thead>标签定义表格的页头 -
<tbody>标签定义表格的主体 -
<tfoot>标签定义表格的页脚 -
rowspan表示表格占得行数,是用来合并行 -
colspan表示表格占得列数,是用来合并列
1. 用<thead>标签实现表格的页头
<table border="2">
<caption>购物车</caption>
<thead>
<tr>
<td rowspan="2">名称</td>
<td colspan="2">2016-11-22</td>
<td rowspan="2">小计</td>
</tr>
<tr>
<td>重量</td>
<td>单价</td>
</tr>
</thead>
</table>
实现效果：
表头实现图
2. 用<thbody>标签实现表格的页头(tody部分代码)
<tbody>
<tr>
<td>苹果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>２公斤</td>
<td>６元/公斤</td>
<td>1２元</td>
</tr>
</tbody>
实现结果图：
tbody实现图
3. tfoot实现表格的尾
代码如下：
<tfoot>
<tr>
<td colspan="3">总价</td>
<td>27元</td>
</tr>
</tfoot>
加上表尾结果图：
表尾结果图
4. align="center"实现表格文字居中
在<thead> <tbody> tfoot标签中加上align="center"就可以实现所有文字居中的这个最后效果啦
最终结果图.png
最后，若看完整的源代码，请戳这里github地址
