为什么html表行的顺序相反?

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/

这是我的js小提琴(http://jsfiddle.net/PQZTL/1/)。

I want the text to be below the broken image.

我希望文字在破碎的图像下面。

Can somebody explain this to me?

有人能给我解释一下吗?

4 个解决方案

#1

The advice given, adding <td> tag(s), solves the practical problem, but as to the “why” question, the answer is that when browsers parse a table and find any content outside the correct syntax, they just collect it and place it before the table.

给出的建议是添加标记(s)，这解决了实际的问题，但是对于“为什么”问题，答案是当浏览器解析一个表并找到语法之外的任何内容时，它们只是收集它并将其放在表之前。

So “whyyyyyyyy does this appear on top???!” isn’t really treated as a row placed before the other row but as garbage outside rows and dumped ahead of the table. You can see this e.g. by using a style sheet rule like table { border: solid red }; the text then appears outside the border.

所以“为什么这个会出现在顶部??!”“并不是把它当作放在另一行之前的行，而是当作放在行的外部的垃圾，并在表前面转储。”例如，您可以通过使用样式表规则(如表{border: solid red})看到这一点;然后文本出现在边框之外。

This browser behavior is described in the HTML5 draft as “foster parenting”, in section Unexpected markup in tables. (The heading is somewhat misleading, since browsers are really prepared to handling the situation in a specific way; so it’s really about handling incorrect markup in tables.)

在HTML5草案中，这种浏览器行为被描述为“养育子女”，在表中的意外标记部分。(标题有些误导，因为浏览器确实准备以一种特定的方式处理这种情况;因此，它实际上是关于处理表中不正确的标记。

#2

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

Because you forgot your <td> elements which makes the HTML invalid and render improperly.

因为您忘记了元素，这使HTML无效并呈现不正确。

#3

Each table row needs to have cells, either th (header cells), or td.

每个表行都需要有单元格，th (header单元格)或td。

In other words, the correct code would be something like I've shown below:

换句话说，正确的代码应该是如下所示:

You can use colspan="2" if you'd like the bottom row to span the above two cells as I've done below, or you can use two cells (i.e. Why does this appear on top??.

您可以使用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>

Hope this helps.

希望这个有帮助。

#4

You're lacking a set of <td> tags around the content that's appearing on top:

在顶部出现的内容周围缺少一组标签:

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

#1

#2

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