为什么html表行以相反的顺序出现？

Question

这是我的代码：

<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tr align="center">
    <td align="left" width="180">
        <a href="http://www.blabllablbalbla.com/"> <img border="0" alt="bablablabla"
        height="" src="/include/img/logo-beta.png"></img> </a>
    </td>
    <td align="right"><a href="http://support.blablalblbalabl.com">Help Center</a> | <a 
        href="/auth/login">Sign In</a>
    </td>
</tr>
<tr>
    whyyyyyyyy does this appear on top???!
</tr>

</table>    

这是我的js小提琴http://jsfiddle.net/PQZTL/1/

我希望文本在破碎的图像下面。

有人可以向我解释一下吗？

Answer 1

给出的建议，添加<td>标签，解决了实际问题，但对于“为什么”的问题，答案是当浏览器解析表并找到正确语法之外的任何内容时，他们只是收集它并放置它在桌子前面。

所以“whyyyyyyyy这个出现在顶部???！”并不是真的被视为放在另一行之前的行，而是作为行外的垃圾并在表前倾倒。你可以看到这个，例如使用像table { border: solid red }这样的样式表规则;然后文本出现在边界之外。

此浏览器行为在HTML5草案中描述为“寄养父母”，在Unexpected markup in tables部分中。 （标题有点误导，因为浏览器真的准备以特定的方式处理这种情况;所以它实际上是关于在表中处理不正确的标记。）

Answer 2

<tr>
    whyyyyyyyy does this appear on top???!
</tr>

因为你忘了你的<td>元素，这使得HTML无效并且渲染不正确。

Answer 3

每个表行都需要有单元格（th（标题单元格）或td）。

换句话说，正确的代码就像我在下面显示的那样：

你可以使用colspan =“2”如果你想让底行跨越上面两个单元格，或者你可以使用两个单元格（即为什么它出现在顶部？）。

<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr align="center">
    <td align="left" width="180">
        <a href="http://www.blabllablbalbla.com/"> <img border="0" alt="bablablabla"
        height="" src="/img/logo-beta.png"></img> </a>
    </td>
    <td align="right"><a href="http://support.blablalblbalabl.com">Help Center</a> | <a 
        href="/auth/login">Sign In</a>
    </td>
 </tr>
 <tr>
    <td colspan="2">
    whyyyyyyyy does this appear on top???!
    </td>  
 </tr>
</table>​​​

希望这可以帮助。

Answer 4

你在顶部出现的内容周围缺少一组<td>标签：

<tr>
    <td>whyyyyyyyy does this appear on top???!</td>
</tr>