Blogger Information
Blog 50
fans 0
comment 0
visits 31434
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
商品表实战练习
手机用户1580651468
Original
468 people have browsed it

商品表实战练习

1:代码如下

<!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" />
<link rel="stylesheet" href="static/css/cart.css" />
<title>商品表</title>
</head>
<body>
<table border="1">
<!-- 标题 -->
<caption>
购物车
</caption>
<!-- 表头 -->
<thead>
<tr>
<th>类型</th>
<th>ID</th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<!-- 表体(必须)浏览器自动生成,一个表格中可以有多个toody -->
<tbody>
<!-- 先写tr,创建行(单元格容器) -->
<tr>
<!-- td:单元格,数据存放的地方 -->
<!-- td,th:都是单元格,th有预置样式:加粗和居中 -->
<!-- 前三行的第一列需要跨行合并 -->
<!-- 跨行合并属性:rowspan,row行 span合并 必须写到td,th中-->
<td rowspan="3">数码</td>
<td>5010</td>
<td>电脑</td>
<td>9000</td>
<td>2</td>
<td>18000</td>
</tr>
<tr>
<!-- td:单元格,数据存放的地方 -->
<!-- <td>数码</td> -->
<td>5012</td>
<td>手机</td>
<td>5000</td>
<td>5</td>
<td>25000</td>
</tr>
<tr>
<!-- td:单元格,数据存放的地方 -->
<!-- <td>数码</td> -->
<td>5013</td>
<td>相机</td>
<td>17000</td>
<td>2</td>
<td>34000</td>
</tr>
<tr>
<!-- td:单元格,数据存放的地方 -->
<td rowspan="2">服装</td>
<td>3030</td>
<td>男装</td>
<td>1000</td>
<td>2</td>
<td>2000</td>
</tr>
<tr>
<!-- td:单元格,数据存放的地方 -->
<!-- <td>服装</td> -->
<td>3031</td>
<td>女装</td>
<td>2000</td>
<td>4</td>
<td>8000</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<!-- 水平方向合并、列合并:colspan -->
<th colspan="4">总计:</th>
<th>15</th>
<th>79000</th>
</tr>
</tfoot>
</table>
<button>结算</button>
</body>
</html>

2:效果图如下

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments