任务地址
https://bbs.excellence-girls.org/topic/210/html
开始任务
我们都知道html有一个table标签，用来创建表格，简单的html表格由table元素以及一个或多个tr、th 或者 td 元素组成，其中tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元，比如下面这个简单表格
它的代码如下：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
对于一些复杂的表格可以通过合并行或者列来实现，table合并列的属性colspan，合并行的属性rowspan，基本语法是<td colspan="跨度的大小">
让我们来看一个例子
横跨两列的单元格
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
横跨两行的单元格
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
通过使用上面两种方式的结合就可以构造出复杂的单元格的合并了
购物车
实现代码
<div align="middle">购物车</div>
<table border="1" cellpadding="10%" align="center">
<tr>
<td rowspan="2">名称</td>
<th colspan="2">2016-11-22</th>
<td rowspan="2">小计</td>
</tr>
<tr>
<td>重量</td>
<td align="middle">单价</td>
</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 colspan="3" align="middle">总价</td>
<td>27元</td>
</tr>
</table>
