为什么我没写tboody外面没写table调试工具里却显示有table

为什么我没写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&nbsp;&copy;imooc.com</footer>
</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好, 因为你的HTML结构中表格的嵌套规则不对。表格遵循的嵌套规则是 table > tbody > tr > td ,然后在td中可以嵌套任意的其它标签。老师这里给你举个简单的例子

1、 如下图所致tbody后面没有跟着tr标签, 浏览器解析异常

http://img1.sycdn.imooc.com//climg/5cecb4c3000129a504640344.jpg

效果图, 浏览器解析了两个table

http://img1.sycdn.imooc.com//climg/5cecb4e90001bae305160399.jpg

2、tr标签下没有跟着td标签, 浏览器会解析异常

http://img1.sycdn.imooc.com//climg/5cecb54e0001a68b05490414.jpg

效果图

http://img1.sycdn.imooc.com//climg/5cecb56400012fc504530220.jpg

3、满足嵌套规则

http://img1.sycdn.imooc.com//climg/5cecb58200016a0005400453.jpg

效果图

http://img1.sycdn.imooc.com//climg/5cecb5a000011a6805440544.jpg

综上所展示的示例, 可以看出必须满足嵌套规则, 浏览器才可以正常解析。

同学可以结合示例, 自己下去测试一下, 帮助自己理解哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

好帮手慕慕子 2019-05-28 10:27:29

同学你好, 因为浏览器解析的原因, 规定是table下嵌套tbody。但是你这里使用tbody直接嵌套了table, 所以浏览器解析的时候将tbody放在了table下面。

如下图所示,嵌套顺序是table > tbody > tr。

http://img1.sycdn.imooc.com//climg/5cec9bc200014f7b05600364.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 蛤小蛤 #1
    最开始我是外面写了一个table的,但是会莫名其妙多出来一个tabl0
    2019-05-28 11:54:09
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码