Why are html table rows displayed 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 someone explain this to me?

Answer 1

This tip, adding the <td> tag (s), solves a practical problem, but as for the question “why”, the answer is that when browsers analyze the table and find any content outside the correct syntax, they simply compile it and put it before by the table.

So whyyyyyyyyyy does this appear on top ?! it’s not really considered as a row placed in front of another row, but as garbage outside the rows and dumped in front of the table. You can see this, for example. Using a style sheet rule, for example table { border: solid red } ; the text then appears outside the border.

This browser behavior is described in the HTML5 project as “parenting,” in the section on Unexpected Layout in Tables . (The title is somewhat misleading, as browsers are really prepared for a specific handling of the situation, so it really handles incorrect markup in tables.)

Answer 2

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

Because you forgot your <td> elements, which make HTML invalid and display incorrectly.

Answer 3

Each row of the table must have cells, either th (header cells) or td.

In other words, the correct code will be as shown below:

You can use colspan = "2" if you want the bottom row to cover the two above cells, as I did below, or you can use two cells (for example, why does this look at the top? / P>

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

Answer 4

You are missing the set of <td> tags around the content that appears at the top:

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