HTML表格实现

一. 所要实现的表格

购物车表格

二 .实现过程

分析第一步

1. 是一个5行4列的表格
2. 表格样式 border 宽为1px ,文字居中

代码实现如下

<table border="1" style="text-align: center">
 <caption>购物车</caption>
  <tr>
   <th>名称</th>
   <th>2016-11-22</th>
   <th></th>
   <th>小计</th>
  </tr>
  <tr>
   <th></th>
   <th>重量</th>
   <th>单价</th>
   <th></th>
  </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>

此时，页面效果为：

页面初步效果

分析第二步

发现与要实现的表格不一样，原因是没有合并单元格
colspan 合并列单元格
rowspan合并行单元格

运用合并单元格后，页面效果为：

合并单元格后

好了，表格实现完毕。

每天都努力一点
谢谢你看完