老师，请检查
来源：3-2 项目作业
unbreakable_全栈
2020-06-09 11:54:08
<!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>
* {
padding: 0;
margin: 0;
border: none;
}
.pl-10 {
padding-left: 10px;
}
table {
width: 100%;
height: auto;
border-collapse: collapse
}
table thead tr,
table tfoot {
width: 100%;
height: 60px;
background: #169bd5;
}
/* 主题样式 */
.main-table {
width: 100%;
border: 2px solid #cccccc;
}
.main-left {
padding: 8px 12px;
border: 4px solid #cccccc;
}
.main-left .all-order {
font-weight: bold;
}
.main-right {
border: 4px solid #cccccc;
}
.main-right table:first-of-type {
border-bottom: 4px solid #cccccc;
}
.main-right table:nth-child(3) tr td {
border-right: 2px solid #cccccc;
border-bottom: 2px solid #cccccc;
}
.order-list {
border-top: 4px solid #cccccc;
text-align: center;
}
.order-list img {
display: inline-block;
width: 43px;
}
tfoot td {
height: 60px;
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<!-- 问题一:相邻边框合并可以使用border-collapse: collapse;属性。 如何使用 -->
<!-- 问题二：这节课不是H5吗？感觉是H5的练习才对，怎么是table表格呢 -->
<table>
<!-- 顶部 -->
<thead>
<tr>
<td>
<img src="./img/logo.png" alt="">
</td>
</tr>
</thead>
<!-- 主体部分（包含左侧和右侧两部分） -->
<tbody>
<tr>
<td>
<table class="main-table">
<tr>
<!-- 主题左侧 -->
<td width="12%" class="main-left">
<br>
<p>商品管理</p><br>
<p>评价管理</p><br>
<p>咨询管理</p><br><br><br>
<p class="all-order">全部订单</p><br>
<p>已完成订单</p><br>
<p>待处理订单</p><br>
<p>今日物流</p><br><br><br>
<p>月考核</p><br>
<p>季度考核</p><br>
<p>年度考核</p>
</td>
<!-- 主题右侧 -->
<td width="88%" class="main-right">
<!-- 全部订单 -->
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="50" class="pl-10">全部订单</td>
</tr>
</table>
<!-- 时间查询 -->
<table cellspacing="0" cellpadding="0">
<tr>
<td height="50" class="pl-10">
<form action="#">
查询：<input type="date"> 至 <input type="date">
</form>
</td>
</tr>
</table>
<!-- 订单列表 -->
<table class="order-list" cellspacing="0" cellpadding="0">
<tr height="50">
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr height="54">
<td><img src="./img/txue.png" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/xie.jpg" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/txue.png" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/xie.jpg" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/txue.png" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/xie.jpg" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/txue.png" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/xie.jpg" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/txue.png" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/xie.jpg" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/txue.png" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54">
<td><img src="./img/xie.jpg" alt=""></td>
<td>2019信款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：45</td>
<td>240</td>
<td>待付款</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- 页脚 -->
<tfoot>
<tr>
<td>2019-09-21 ©imooc.com</td>
</tr>
</tfoot>
</table>
</body>
</html>
1回答
-
同学你好，解答如下：
1、代码中使用该属性是正确的：
2、table标签是前端开发中html/html5中，最最基础的一部分，需要掌握。所以这里设置一个项目作业来考察同学对于表格的掌握情况。另，这是一个项目作业，推荐同学提交作业，批作业的老师会针对你的完整项目给出详细的修改意见，并整理成文档发送给同学，便于同学查看与修改。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
0
相似问题