HTML之创建表格
2016-12-04 本文已影响103人
WP啦啦啦
要求：用HTML实现如下所示的表格
对于初学者而言当看到这个表格的时候会不会有点懵呢？表头又是行合并，又是列合并的，我们不妨从最简单的入手，可以先将表格的主体创建好，主体的最后一行只有2列，第一列是将前3列进行合并成为1列。
<html>
<body>
<table border="1" >
<caption>购物车</captipon>
<tbody style="text-align:center">
<tr>
<th> 苹果 </th>
<td> 3公斤 </td>
<td> 5元/公斤 </td>
<td> 15元 </td>
</tr>
<tr>
<th> 香蕉 </th>
<td> 2公斤 </td>
<td> 6元/公斤 </td>
<td> 12元 </td>
</tr>
<tr>
<th colspan=3>总价</th>
<td>27元</td>
</tr>
</tbody>
</table>
</body>
</html>
效果如下图所示：
接下来，我们就可以对表头进行分析，表头实际上是2行2列，
名称列和 小计列是将两行合并成一行，2016-11-22列是将 重量 和 '单价' 列进行合并成为一列。对表头进行分析后，我们可以在表主体上添加设置表头的代码：
<thead>
<tr >
<th rowspan=2> 名称 </th>
<th colspan=2> 2016-11-22 </th>
<th rowspan=2> 小计 </th>
</tr>
<tr>
<th> 重量 </th>
<th> 单价 </th>
</tr>
</thead>
全部代码：
<html>
<body>
<table border="1" style="height: 112px; width: 339px">
<caption>购物车</captipon>
<thead>
<tr >
<th rowspan=2> 名称 </th>
<th colspan=2> 2016-11-22 </th>
<th rowspan=2> 小计 </th>
</tr>
<tr>
<th> 重量 </th>
<th> 单价 </th>
</tr>
</thead>
<tbody style="text-align:center">
<tr>
<td> 苹果 </td>
<td> 3公斤 </td>
<td> 5元/公斤 </td>
<td> 15元 </td>
</tr>
<tr>
<td> 香蕉 </td>
<td> 2公斤 </td>
<td> 6元/公斤 </td>
<td class="style1"> 12元 </td>
</tr>
<tr>
<td colspan=3>总价
</td>
<td>27元
</td>
</tr>
</tbody>
</table>
</body>
</html>
效果如图：
