html-表格购物车实现

今天要实现的表格是这样的

目标表格

设置表格的边框

可以看出这个表格是有边框的，所以我们需要设置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地址