title: Where and when do HTML tables add white space to the bottoms of cells or rows?
body: <p>When and where does HTML decide to add white space to its tables despite using cellpadding and cellspacing set to zero? I'm working on an HTML email and am unable to use CSS. Now I've stripped down the code just about as far as it can be stripped down to see where the error is hiding. Here's what I've got: </p>
  
  <pre><code>&lt;body&gt;                      
  &lt;table width="600" bgcolor="#000000" border="0" cellpadding="0" cellspacing="0"&gt;
        &lt;tr&gt;
                 &lt;td align="left" valign="bottom" width="200"&gt;&lt;img width="200" height="38" src="img/lineone.jpg"&gt;&lt;/td&gt;
                 &lt;td align="left" bgcolor="#000000" valign="bottom"&gt;&lt;img  src="img/linetwo.jpg" width="293"&gt;&lt;/td&gt;
                 &lt;td align="left" valign="bottom" width="107"&gt;&lt;img width="107" src="img/rewardslogo.jpg"&gt;&lt;/td&gt;
        &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>When I look at this in the browser, it looks like this: (note the black line underneath the the bottom of the table. That shouldn't be there.)
  <img src="https://i.stack.imgur.com/lMb7K.png" alt="Black line running along the bottom of the table. It should be there and I need to get rid of it."></p>
  
  <p>Any ideas, suggestions, or explanations would be greatly appreciated. I guess I simply don't understand how HTML creates the table and why it seems to ignore the <code>cellpadding</code> and <code>cellspacing</code> attributes. The code was originally much more complicated with many more nested tables but this is about as simple as I can get the heading of the email to look and the problem still remains. Any ideas?  </p>
  
  <p>Here is a demo of the issue: <a href="http://jsfiddle.net/mbc8r/" rel="nofollow noreferrer">http://jsfiddle.net/mbc8r/</a></p>
  
  <p>I changed the bgcolor of the cells so that you can see more clearly where each cell ends. </p>