为什么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 fiddle http://jsfiddle.net/PQZTL/1/

我希望文本位于损坏的图像下方。

谁能给我解释一下？

Answer 1

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

所以“为什么这会出现在顶部？？？！”并没有真正被视为放置在另一行之前的行，而是作为行外的垃圾并倾倒在桌子前面。你可以看到这个，例如通过使用像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>