效果图：
html5代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物清单</title>
<style>
table{width: 700px;margin:auto;border:1px solid #000000;border-collapse: collapse;}
table caption{padding:10px;font:bold 1.2em/1.5 arial microsoft yahei;}
table tr{padding: 10px; border: 1px solid #999999;text-align: center;height: 100px;}
img{width: 80px;height: 80px;margin:auto;padding: 10px;}
span{color: #FF0099;font:bold 2em arial microsoft yahei sans-serif;}
button{background-color: #FF0099;color: #FFFFFF;width: 100px;height: 40px;border-style: none;font:bold 1.2em microsoft yahei;}
.align{text-align: right;}
.l-align{text-align: left;}
.height{height: 60px;}
</style>
</head>
<body>
<table>
<caption>您的购物清单</caption>
<tr class="height">
<th class="l-align">图形</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td class="l-align"><img src="../images/cup.jpg" alt="cup"></td>
<td>水杯</td>
<td>10</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td class="l-align"><img src="../images/basket.jpg" alt="basket"></td>
<td>篮子</td>
<td>15</td>
<td>2</td>
<td>30</td>
</tr>
<tr>
<td class="l-align"><img src="../images/bathtub.jpg" alt="bathtub"></td>
<td>儿童浴盆</td>
<td>20</td>
<td>1</td>
<td>20</td>
</tr>
<tr>
<td class="l-align"><img src="../images/mop.jpg" alt="mop"></td>
<td>拖把</td>
<td>13</td>
<td>1</td>
<td>13</td>
</tr>
<tr>
<td colspan="5" class="align">总价：<span>83   </span><button>去结算</button></td>
</tr>
</table>
</body>
</html>
