Why do the html table rows appear in reverse order?

Question

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?

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

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.

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