《任务201-2 HTML》

任务地址

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>