为什么我没写tboody外面没写table调试工具里却显示有table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>HTML5</title> <link rel="stylesheet" href="css/html5.css" /> </head> <body> <!-- 顶部 --> <header> <img src="img/logo.png" /> </header> <!-- 页面主体 --> <section> <!-- 整体表格 --> <tbody> <table> <tr> <!-- 主体左侧模块 --> <td class="left"> <p>商品管理</p> <p>评价管理</p> <p>咨询管理</p> <br /> <br /> <br /> <h1>全部订单</h1> <p>已完成订单</p> <p>待处理订单</p> <p>今日物流</p> <br /> <br /> <br /> <p>月考核</p> <p>季度考核</p> <p>年度考核</p> </td> <!-- 主体右侧模块 --> <td class="right"> <!-- 全部订单部分 --> <table> <tr> <td colspan="8">全部订单</td> </tr> </table> <!-- 时间查询部分 --> <table> <tr> <td colspan="8"> 查询：<input type="date" />至<input type="date" /> </td> </tr> </table> <!-- 订单列表部分 --> <table> <tr> <td colspan="2">宝贝信息</td> <td>订单数量</td> <td>单价</td> <td>买家</td> <td>下单时间</td> <td>实付款</td> <td>订单操作</td> </tr> <tr> <td> <img src="img/txue.png" /> </td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>代付款</td> </tr> <tr> <td> <img src="img/xie.jpg" /> </td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>小李子</td> <td>2019-2-21 19:04</td> <td>240</td> <td>未发货</td> </tr> <tr> <td> <img src="img/txue.png" /> </td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小红</td> <td>2019-2-21 16:54</td> <td>240</td> <td>待发货</td> </tr> <tr> <td> <img src="img/xie.jpg" /> </td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>可乐</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr> <td> <img src="img/txue.png" /> </td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>魏明</td> <td>2019-2-21 16:54</td> <td>240</td> <td>待发货</td> </tr> <tr> <td> <img src="img/xie.jpg" /> </td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>李晓雨</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr> <td> <img src="img/txue.png" /> </td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>艳艳</td> <td>2019-2-21 16:54</td> <td>240</td> <td>待发货</td> </tr> <tr> <td> <img src="img/xie.jpg" /> </td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>片片</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr> <td> <img src="img/txue.png" /> </td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小兰</td> <td>2019-2-21 16:54</td> <td>240</td> <td>待发货</td> </tr> <tr> <td> <img src="img/xie.jpg" /> </td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>魏嘤咯</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr> <td> <img src="img/txue.png" /> </td> <td>2019新款个性男女潮牌imooc暮春之行文化衫</td> <td>2</td> <td>120</td> <td>小慕</td> <td>2019-2-21 16:54</td> <td>240</td> <td>待发货</td> </tr> <tr> <td> <img src="img/xie.jpg" /> </td> <td>2019新款个性男女潮牌imooc暮春之行运动鞋</td> <td>2</td> <td>120</td> <td>小苏</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> </table> </td> </tr> </table> </tbody> </section> <!-- 底部 --> <footer>2019-9-21 ©imooc.com</footer> </body> </html>
0
收起
正在回答
2回答
同学你好， 因为你的HTML结构中表格的嵌套规则不对。表格遵循的嵌套规则是 table > tbody > tr > td ，然后在td中可以嵌套任意的其它标签。老师这里给你举个简单的例子
1、 如下图所致tbody后面没有跟着tr标签， 浏览器解析异常
效果图， 浏览器解析了两个table
2、tr标签下没有跟着td标签， 浏览器会解析异常
效果图
3、满足嵌套规则
效果图
综上所展示的示例， 可以看出必须满足嵌套规则， 浏览器才可以正常解析。
同学可以结合示例， 自己下去测试一下， 帮助自己理解哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星