实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>软件介绍</title>
<style>
table,th,td {
border:1px solid black;
}
table {
border-collapse:collapse;
text-align:center;
width:80%;
/*水平,垂直,像素,颜色*/
box-shadow:8px 8px 5px #888888;
margin:50px auto;
background-image:url(images/bgimage.jpg);
background-repeat:no-repeat;
background-size:cover;
}
table caption {
font-size:1.7em;
font-weight:bolder;
margin:30px;
}
th,td {
padding:5px;
}
table img {
width: 150px;
box-shadow:5px 5px 5px #888888;
}
.brown,th {
background-color: rgba(155,155,0,0.5);
color:red;
}
#weixin {
color:brown;
}
</style>
</head>
<body>
<table >
<caption>软件价格表</caption>
<tr>
<th>ID </th>
<th>产品</th>
<th>价格</th>
<th>是否年费</th>
<th>产品图片</th>
<th>简介</th>
<th rowspan="6" class="brown">优惠活动进行中...</th>
</tr>
<tr>
<td>1</td>
<td>点餐收银软件</td>
<td>98</td>
<td>否</td>
<td><img src="images/1.jpg" alt="点餐收银软件" ></td>
<td>为你省钱的餐饮软件</td>
</tr>
<tr>
<td>2</td>
<td>会员软件</td>
<td>80</td>
<td>是</td>
<td><img src="images/2.jpg" alt="会员软件" ></td>
<td>帮你留住客人的会员管理软件</td>
</tr>
<tr>
<td>3</td>
<td>库存软件</td>
<td>180</td>
<td>是</td>
<td><img src="images/3.jpg" alt="库存软件" ></td>
<td>无需到店，即可掌控仓库供货情况</td>
</tr>
<tr>
<td>4</td>
<td>厨房显示</td>
<td>195</td>
<td>否</td>
<td><img src="images/4.jpg" alt="厨房显示" ></td>
<td>同步收银点餐系统，后厨工作更有序</td>
</tr>
<tr>
<td>5</td>
<td id="weixin">微信点餐</td>
<td>259</td>
<td>是</td>
<td><img src="images/5.jpg" alt="厨房显示" ></td>
<td>扫码点餐支付，操作轻松高效</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
