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