整合table,caption,thead,tbody,tfoot,tr,th,td标签制作一个表格
实例
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
#goods table,
tr,
th,
td {
text-align: center;
width: 1000px;
border: 1px solid hotpink;
}
#foot {
line-height: 40px;
background-color: lightgrey;
}
#title {
font-weight: bolder;
}
#head {
background-color: lightgrey;
}
.list {
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="goods">
<table cellspacing="0">
<caption id="title">
商品列表详情
</caption>
<thead id="head">
<tr>
<th>id</th>
<th>商品名称</th>
<th>商品分类</th>
<th>商品价格</th>
<th>商品库存</th>
<th>商品总价值</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td>1</td>
<td>苹果</td>
<td rowspan="3">水果</td>
<td>10元/个</td>
<td>10个</td>
<td>100元</td>
</tr>
<tr>
<td>2</td>
<td>香蕉</td>
<td>20元/个</td>
<td>20个</td>
<td>400元</td>
</tr>
<tr>
<td>3</td>
<td>梨</td>
<td>30元/个</td>
<td>30个</td>
<td>900元</td>
</tr>
</tbody>
<tbody class="list">
<tr>
<td>4</td>
<td>啤酒</td>
<td rowspan="3">酒水</td>
<td>5元/瓶</td>
<td>10瓶</td>
<td>50元</td>
</tr>
<tr>
<td>5</td>
<td>红酒</td>
<td>1元/瓶</td>
<td>20瓶</td>
<td>20元</td>
</tr>
<tr>
<td>6</td>
<td>天之蓝</td>
<td>0.5元/瓶</td>
<td>30瓶</td>
<td>15元</td>
</tr>
</tbody>
<tfoot id="foot">
<tr>
<td colspan="4">总计</td>
<td>120（个/瓶）</td>
<td>1785元</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
