大卖王商品表格
效果图如下
- 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>大卖王</title>
</head>
<body>
<table border="1" width="50%" cellspacing="0">
<caption>
大卖王
</caption>
<thead>
<tr>
<th>类型</th>
<th>ID</th>
<th>品名</th>
<th>价格</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td rowspan="4">电器</td>
<td>1</td>
<td>电视</td>
<td>1000</td>
<td>1</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>洗衣机</td>
<td>1500</td>
<td>2</td>
<td>3000</td>
</tr>
<tr>
<td>3</td>
<td>空调</td>
<td>500</td>
<td>10</td>
<td>5000</td>
</tr>
<!-- 特价商品 -->
<tr>
<td colspan="5">特价商品</td>
</tr>
<tr>
<td rowspan="4">手机</td>
<td>4</td>
<td>苹果6S</td>
<td>100</td>
<td>10</td>
<td>1000</td>
</tr>
<tr>
<td>5</td>
<td>苹果X</td>
<td>1000</td>
<td>5</td>
<td>5000</td>
</tr>
<tr>
<td>6</td>
<td>苹果12</td>
<td>1100</td>
<td>3</td>
<td>3300</td>
</tr>
<tr>
<td>7</td>
<td>苹果13</td>
<td>666</td>
<td>1</td>
<td>666</td>
</tr>
</tbody>
<tfoot align="center" bgcolor="chocolate">
<tr>
<td>总计</td>
<td colspan="2">总数:32</td>
<td colspan="3">总价格:18966</td>
</tr>
</tfoot>
</table>
</body>
</html>