<!DOCTYPE html>
<html>
<head>
<title>制作一张表格-----一个购物清单</title>
<meta charset="utf-8">
<style type="text/css">
table{border-collapse: collapse; /*表格用border-collapse折叠 */
text-align: center;
width:600px;
}
caption{font-size: 20px;font-weight: bold; font-family:黑体;margin-bottom: 10px;} /* 标题属性 */
table tr td{border:1px solid #666;} /* 给表格一个实线 */
table tr th{border:1px solid #666; background-color:#ccc;}
table tr td img {width:80px; height:60px; border-radius: 10px; /* 缩略提长款和有个10像素的圆角 */
padding: 5px;}
table tr td a{
font-weight: bold;
text-decoration: none; /* 把a链接下划线去掉 */
border:1px solid black;
color:black;
padding: 5px;
border-radius: 6px;
}
table tr td a:hover{ /*伪类使用hover在鼠标滑过确认买时背景会变 */
background-color: red;
color:white;
}
</style>
</head>
<body>
<table>
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>买数量</th>
<th>商品图片</th>
<th>买</th>
</tr>
<tr>
<td>1</td>
<td>西瓜</td>
<td>25</td>
<td>1</td>
<td><img src="images/xg.jpg"></td>
<td><a href="http://jd.com">点击买</a></td>
</tr>
<tr solid #666>
<td>2</td>
<td>西红柿</td>
<td>15</td>
<td>10</td>
<td><img src="images/xhs.jpg"></td>
<td><a href="http://jd.com">点击买</a></td>
</tr>
<tr>
<td>3</td>
<td>ping果</td>
<td>20</td>
<td>15</td>
<td><img src="images/pg.jpg"></td>
<td><a href="http://jd.com">点击买</a></td>
</tr>
<tr>
<td>4</td>
<td>榴莲</td>
<td>100</td>
<td>1</td>
<td><img src="images/ll.jpg"></td>
<td><a href="http://jd.com">点击买</a></td>
</tr>
</table>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
