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?

Baste

You can't put content directly inside a <tr>, you need to have a <td> inside. Also, you are using some inlined parameters in your elements that have been replace by CSS equivalents. Take a good read at www.w3schools.com on both HTML and CSS. – Pisces

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

Cutlerr

Answer 2

Each table row needs to have cells, either th (header cells), or 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??.

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

Exhibitor

Answer 3

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

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

Marianelamariani

You'll also need to remove that </img> ;) – Ethylene

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

Ilmenite