I was working on a new site today and I came across a situation with HTML images that perplexed me. While in the process of skinning this site, I was creating gifs for my header, one pixel at a time it seemed. To make a long story short, the following HTML code will help demonstrate the issue.

For any given HTML table and an HTML image, I was using something like this.
<table cellspacing=”0” cellpadding=”0” border=”0” width=”100%”>
   <tr>
      <td align=”center”>
         <img src=”someimage.gif” border=”0”/>
      </td>
   </tr>
</table>

Notice the extra pixels here.

Even if you do not have a proper image my test will still work. What happens is below the image, there appears to be about 2-3 pixels of empty space. What I was doing required that my tables be seamless. It turns out, if I set the background attribute of the “TD” tag, it resolves my problem, but that does not answer my question.

<table cellspacing=”0” cellpadding=”0” border=”0” width="100%">
   <tr>
      <td align="center" background="someimage.gif">
      </td>
   </tr>
</table>

I tried a number of different scenarios, but nothing removed that pesky white space. I could not find any help searching the internet for answers. I guess we just have to live with the extra pixels. In the meantime, I’ll stick to my background attribute.