这个表格是如何用HTML实现的?

<h2>题目要求:实现如下表格。<h2>

表格1.png

1.实现上面的表头

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">  
  <title>Title</title></head>
<body>
<p>购物车</p>
<table border="1">   
 <tbody>   
 <tr>        
<th rowspan="2">名称</th>    
<th colspan="2">2016-11-22</th>        
<th rowspan="2">小计</th>    
</tr>    
<tr>        
<th>重量</th>        
<th>单价</th>    
</tr>    
</tbody>
</table>
</body>
</html>
table2.png

2.实现表格的body:

<tbody>
<tr>    
<th>苹果</th>    
<th>3公斤</th>    
<th>5元/公斤</th>    
<th>15元</th>
</tr>
<tr>    
<th>香蕉</th>    
<th>2公斤</th>    
<th>6元/公斤</th>    
<th>12元</th>
</tr>
</tbody>
table3.png

3.实现表格底部:

<tfoot>
<tr>   
 <th colspan="3">总价</th>    
<th>27元</th>
</tr>
</tfoot>
table4.png

以上就是完成这道题的步骤。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容