为什么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草案中描述为"foster parenting",在表中的意外标记部分中.(标题有点误导,因为浏览器真的准备以特定的方式处理这种情况;所以它实际上是关于在表中处理不正确的标记.)

Answer 2

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

\n\n

换句话说，正确的代码如下所示：

\n\n

如果您希望底行像我在下面所做的那样跨越上述两个单元格，您可以使用 colspan="2"，或者您可以使用两个单元格（即为什么它出现在顶部？？）

\n\n

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

\n\n

希望这可以帮助。

\n

Answer 3

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

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