为什么我没写tboody外面没写table调试工具里却显示有table
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 | <!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积分~
来为老师/同学的回答评分吧