What's wrong with my table?

Here is the code for the table:

<table align="center" width="303" height="740" border="1" cellpadding="10">
  <tr>
    <th width="130" height="41" scope="col">URL1 - Normal</th>
    <th width="121" scope="col">URL2  - Hover</th>
  </tr>
  <tr>
    <td height="94"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-green.png"/></td>
    <td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-green-h.png" alt=""/></td>
  </tr>
  <tr>
    <td height="124"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-blue.png" alt=""/></td>
    <td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-blue-h.png" alt=""/></td>
  </tr>
  <tr>
    <td height="147"><img src="http://i1018.p开发者_运维问答hotobucket.com/albums/af309/5416339/ad-grey-h.png" alt=""/></td>
    <td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-grey.png" alt=""/></td>
  </tr>
  <tr>
    <td height="137"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-pink.png" alt=""/></td>
    <td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-pink-h.png" alt=""/></td>
  </tr>
  <tr>
    <td height="132"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-red.png" alt=""/></td>
    <td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-red-h.png" alt=""/></td>
  </tr>
  <tr>
    <td height="132"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-black.png" alt=""/></td>
    <td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-black-h.png" alt=""/></td>
  </tr>
</table>

When I insert the table, it leaves a gap in-between the table and the text. If I remove the table, then everything is fine. What's going wrong here?

Blogspot inserts line breaks for you... and they push the table down. (I haven't found a workaround yet.)

If you view the source, you can see them:

<table align="center" width="303" height="740" border="1" cellpadding="10"><br />
  <tr><br />
    <th width="130" height="41" scope="col">URL1 - Normal</th><br />
    <th width="121" scope="col">URL2  - Hover</th><br />
    </tr><br />
    <tr><br />
    <td height="94"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-green.png"/></td><br />
    ...

Because the BRs are invalid when directly inside a TABLE, TR, or after a TH or TD, the browser pushes those elements out of and above the table when rendering the DOM.

If you take a look at the source of the page, you'll notice a TON of <br/> tags interspersed with your table (but not contained in cell elements). They are rendered above the table.

It looks like your HTML is being parsed by something, and your line-breaks are being replaced with BR tags.

Quick solution: remove all linebreaks and just have the table code on one line :)

It has nothing to do with the table. It's the fact that there are 31 <br> (line break) tags before the table (which are what are creating the huge gap.

It sounds like BlogSpot (or whatever blog service you are using) is adding extra <br> tags based on how you're formatting the rest of your content. Edit the source of the page if possible and manually remove them...otherwise it becomes a support issue with whatever blog platform you're on.

This has nothing to do with anything in your table markup. Viewing the HTML source of that page shows about 30 <br> tags ahead of the table. They are obviously responsible for the extra space.

Why you get 30 <br> tags when inserting a table must have something to do with how blogspot.com is formatting your content. Your best bet is to try editing the HTML by hand to remove the <br> tags. If you can't do that, or if the <br> tags don't show up when editing the HTML, it's a question for customer service at Blogspot.