tfoot的位置对显示效果的影响

一直以为tfoot的位置对显示是没有影响的，但是这边我换了tfoot设置的位置显示效果大不同

tfoot放在tbody后的话

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hw-h5</title>
<link rel="stylesheet" href="style/hw-h5.css" type="text/css">
<link rel="icon" href="img/favicon.png">
</head>
<body>
<table>
<thead>
<tr>
<td><img src="img/logo.png" alt=""></td>
</tr>
</thead>

<tbody>
<table>
<tr>
<td>
<p>商品管理</p>
<br/>
<p>评价管理</p>
<br/>
<p>咨询管理</p>
<br/>
<p>全部订单</p>
<br/>
</td>
<td>
<table></table>
<table></table>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</tbody>
<tfoot>
<tr>
<td>2019-9-21&nbsp;&copy;imooc.com</td>
</tr>
</tfoot>

</table>
</body>
</html>

其中内容就被挤到table外面去了只有在tfoot在tbody前（thead后）的时候，css效果才能显示。

但是看下面截图右边部分的话，table好像凭空多出来一个，tbody内容挤到后一个table中

有点一头雾水

参考起见，附上css代码

table{
	width: 100%;
	/*background-color: #169bd5;*/
}

thead{
	background: #169bd5;
	height: 60px;
}

thead > a > img{
	padding-top: 10px;
	padding-left: 5px;
}

tbody{
	border: 1px solid gray;
}

tfoot{
	background-color: red;
	width: 100%;
	height: 60px;
	text-align: center;
	line-height: 60px;
}

幕布斯3322991 2019-12-03

源自：项目：H5布局 3-2 项目作业