作业要求：实现以下一个表格样式
购物车.jpg
内容分析：首先根据表格内容，可将表格分割成5x4的标准单元格。其中，表头“名称”和“小计”占两行标准单元格；表头“2016-11-22”占两列单元格；表头“总价”占三列标准单元格；其余内容各占一个标准单元格。
分析完毕以后，表头可通过以下方式实现
<th 属性=“属性值”>，属性colspan可设置占用标准单元格的几列，属性rowspan可设置占用标准单元格的几行。
“名称”和“小计”：<th rowspan="2">
“2016-11-22”：<th colspan="2">
“总价”：<th colspan="2">
实现代码如下（按行实现）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset="utf-8"/>
</head>
<body>
<table border="1" cellpadding="5">
<caption>购物车</caption>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</tr>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
<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>
</table>
</body>
</html>
结果展示：
按行实现.PNG
上面所说的按行实现，意思是指先实现表格中第一行的内容接着实现第二行的内容，以此类推。接下来又试了试按列来实现，即按表格的每一列来实现，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset="utf-8"/>
</head>
<body>
<table border="1" cellpadding="5">
<caption>购物车</caption>
<td>
<th rowspan="2">名称</th>
<th>苹果</th>
<th>香蕉</th>
<th colspan=3>总价</th>
</td>
<td>
<th colspan="2">2016-11-22</th>
<th>重量</th>
<tr>3公斤</tr>
<tr>2公斤</tr>
</td>
<td>
<th>单价</th>
<tr>5元/公斤</tr>
<tr>6元/公斤</tr>
</td>
<td>
<th rowspan="2">小计</th>
<tr>15元</tr>
<tr>12元</tr>
<tr>27元</tr>
</td>
</table>
</body>
</html>
结果却是酱儿婶的：
按列实现.PNG
想了半天也没又想明白，难道默认按行来实现，不能按列来实现嘛？功力还不够深厚，目前不明白这是为什么捏？
