5

Here is my code:

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

and here is my js fiddle http://jsfiddle.net/PQZTL/1/

I want the text to be below the broken image.

Can somebody explain this to me?

4

4 回答 4

6

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

所以“为什么这会出现在顶部？？？！” 并没有真正被视为放置在另一行之前的行，而是作为行外的垃圾并倾倒在桌子前面。您可以通过使用样式表规则来查看这一点，例如table { border: solid red }; 然后文本出现在边框之外。

这种浏览器行为在 HTML5 草案中被描述为“养育子女”，在表格中的意外标记部分中。（标题有点误导，因为浏览器真的准备好以特定方式处理这种情况；所以它实际上是关于处理表格中的错误标记。）

于 2012-12-14T07:22:07.333 回答
4 
<tr>
    whyyyyyyyy does this appear on top???!
</tr>

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

于 2012-12-14T00:24:40.163 回答
4

每个表格行都需要有单元格，要么是 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>​​​

希望这可以帮助。

于 2012-12-14T00:32:20.347 回答
0

您缺少<td>围绕显示在顶部的内容的一组标签：

<tr>
    <td>whyyyyyyyy does this appear on top???!</td>
</tr>
于 2012-12-14T00:26:46.120 回答