Whats wrong with my table ?

Question

Guys,

Check this out : Deleted link to website offering illegal services

and 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"/&gt;&lt;/td&gt;
    <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.photobucket.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 so much gap in between the table and the text if i remove the table then everything is fine..Whats going wrong here ?

Thanking You, 5416339

Answer 1

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

If you veiw 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"/&gt;&lt;/td&gt;&lt;br />
    ...

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

Answer 2

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.

Answer 3

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

Answer 4

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.