用表格的方式做一个购物车
最终最好的样式为：
首先，表格要有标题、表头、内容等，其次要添加相应的样式，做出来的表格才不至于太单调。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: auto;
color: #444;
font-weight: lighter;
text-align: center;
}
th,
td {
border-bottom: 1px solid #bbbb;
padding: 10px;
}
table caption {
font-size: 1.5rem;
margin-bottom: 15px;
color: darkblue;
font-weight: bolder;
}
table th {
font-size: 1.2rem;
background-color: lightgreen;
}
table tbody tr:nth-of-type(even) {
background-color: lightyellow;
}
table tbody tr:hover {
background-color: lightblue;
}
table tfoot td {
font-size: 1.2rem;
font-weight: bolder;
background-color: limegreen;
}
body div:last-of-type {
width: 70%;
margin: 10px auto;
}
body div:first-of-type button {
float: right;
width: 120px;
height: 32px;
background-color: darkgreen;
color: white;
border: none;
cursor: pointer;
}
body div:first-of-type button:hover {
background-color: coral;
font-size: 1.1rem;
}
</style>
</head>
<body>
<table>
<caption>
购物车
</caption>
<thead>
<tr>
<th>品名</th>
<th>型号</th>
<th>数量</th>
<th>单位</th>
<th>单价</th>
<th>金额（元）</th>
</tr>
</thead>
<tbody>
<tr>
<td>打印机</td>
<td>HP1008</td>
<td>5</td>
<td>台</td>
<td>980</td>
<td>4900</td>
</tr>
<tr>
<td>电脑桌</td>
<td>组合式</td>
<td>5</td>
<td>台</td>
<td>260</td>
<td>1300</td>
</tr>
<tr>
<td>硒鼓</td>
<td>HP1008</td>
<td>5</td>
<td>个</td>
<td>180</td>
<td>900</td>
</tr>
<tr>
<td>台式电脑</td>
<td>组装</td>
<td>5</td>
<td>台</td>
<td>3800</td>
<td>19000</td>
</tr>
<tr>
<td>复印纸</td>
<td>A4</td>
<td>10</td>
<td>箱</td>
<td>180</td>
<td>1800</td>
</tr>
</tbody>
<tfoot>
<td colspan="2">总计</td>
<td>30</td>
<td colspan="3">27900</td>
</tfoot>
</table>
<div>
<button>结算</button>
</div>
</body>
</html>
做出来的购物车样式如下图，除了如图看到的样式，还有鼠标悬停变色，鼠标悬停在“结算”按钮变为“小手”的样子：