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>

因为您忘记了导致HTML无效且呈现不正确的<td>元素。

Answer 3

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

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

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

<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>

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

4 个答案: