一、效果图如
二、代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
color: gray;
width: 1230px;
background-image: url(img/bg4.png);
padding-top: 60px;
padding-left: 260px;
}
td{
width: 100px;
}
span{
/* 块级显示,单独占一行 */
display: block;
}
div{
/* border: 1px solid; */
width: 105px;
/* 左浮动,可在同一行显示 */
float: left;
/* div文本设置 */
text-align: left;
}
img{
width: 60px;
}
.name{
/* border: 1px solid; */
width: 130px;
margin-top: 30px;
}
.worker{
/* border: 1px solid; */
width: 75px;
height: 20px;
color: red;
margin-left: 100px;
}
</style>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<thead>
<tr>
<!-- cospan列合并 -->
<td colspan="12"><h2>我的订单</h2><hr></td>
</tr>
<tr align="center">
<td>状态</td>
<td>全部</td>
<td>未付款</td>
<td>状态</td>
<td>全部</td>
<td>未付款</td>
<td>退款中</td>
<td>已评价</td>
<td>未评价</td>
<td colspan="4">关闭</td>
</tr>
<tr><td colspan="12"><hr></td></tr>
</thead>
<tbody>
<!-- 第一行 -->
<tr align="center" >
<td colspan="3">订单号</td>
<td colspan="4">课程/套餐名称</td>
<td>价格</td>
<td>
<!-- 下拉菜单 -->
<select>
<option>下单时间</option>
<option>2017-11-11 10:31:50</option>
<option>2017-11-11 9:31:50</option>
<option>2017-11-11 9:20:50</option>
</select>
</td>
<td>订单状态</td>
<td>操作</td>
</tr>
<tr><td colspan="12"><hr></td></tr>
<!-- 第一行 -->
<tr align="center">
<td colspan="3"><span>16476398</span><span>订单详情</span></td>
<td colspan="4">
<div><img src="img/book6.png"></div>
<div class="name"><span>Android项目开发</span><span>实战入门</span></div>
<div class="worker"><span>联系客服</span></div>
</td>
<td>￥59.80</td>
<td><span>2017-11-11</span><span>10:31:50</span></td>
<td>已付款</td>
<td><span>评价课程</span><span>开始学习</span></td>
</tr>
<tr><td colspan="12"><hr></td></tr>
<!-- 第二行 -->
<tr align="center">
<td colspan="3"><span>16476398</span><span>订单详情</span></td>
<td colspan="4">
<div><img src="img/book7.png"></div>
<div class="name"><span>Android项目开发</span><span>实战入门</span></div>
<div class="worker"><span>联系客服</span></div>
</td>
<td>￥59.80</td>
<td><span>2017-11-11</span><span>9:31:50</span></td>
<td>已付款</td>
<td><span>评价课程</span><span>开始学习</span></td>
</tr>
<tr><td colspan="12"><hr></td></tr>
<!-- 第三行 -->
<tr align="center">
<td colspan="3"><span>16476398</span><span>订单详情</span></td>
<td colspan="4">
<div><img src="img/book8.png"></div>
<div class="name"><span>Android项目开发</span><span>实战入门</span></div>
<div class="worker"><span>联系客服</span></div>
</td>
<td>￥69.80</td>
<td><span>2017-11-11</span><span>9:20:50</span></td>
<td>已付款</td>
<td><span>评价课程</span><span>开始学习</span></td>
</tr>
<tr><td colspan="12"><hr></td></tr>
</tbody>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
