实现效果
表格布局效果图
详细实现思路
表格整体布局为：五行四列，部分单元格占据多行或者多列。
表格的标题是使用caption标签，使用这个标签的好处是：标题一直和表格整体对齐，不论怎么改变表格位置，标题一直相对表格在原先的位置上。
注意：这对标签必须写在<table></table>之间才能起作用，写在<table></table>之外不起作用。
rowspan属性为设置该单元格可横跨的行数，colspan属性为设置该单元格可横跨的列数，表格中单元格“名称”和"小计"横跨两行，所以设置单元格的属性rowspan="2"；单元格"2016-11-22"横跨两列，所以设置单元格的属性colspan="2"；类似地，设置单元格“总价”的属性colspan="3"。
在下面的css代码中，对表格的整体边框和每个单元格的边框的样式进行了设置。
实现代码
HTML代码如下：
<table align="center">
<caption align="top">购物车</caption>
<tr>
<td rowspan="2">名称</td>
<td colspan="2">2016-11-22</td>
<td rowspan="2">小计</td>
</tr>
<tr>
<td>重量</td>
<td>单价</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">总价</td>
<td>27元</td>
</tr>
</table>
CSS代码如下：
<style>
table{
border:2px solid;
border-color:rgba(0,0,0,0.5) rgba(0,0,0,1) rgba(0,0,0,1) rgba(0,0,0,0.5);
}
table td{
border:1px solid rgba(0,0,0,0.5);
text-align:center;
vertical-align: middle;
padding:4px 5px;
}
</style>
