title: HTML tables: making 'em stick
body: <p>I'm wanting a whole table of 50px by 50px images, and these images need to stick to each other to make an apparent bigger image. So right now I've gotten them to stick horizontally, but not vertically, like so:</p>
  
  <p><img src="https://i.stack.imgur.com/J2qtQ.png" alt="Image of what I&#39;m talking about">
  <p>
  As you can see I'm having a problem getting rid of <strong>area A</strong> (red arrow)</p>
  
  <p>My code looks like this right now:</p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0"&gt;
     &lt;tr height="50px"&gt;
       &lt;td width="50px" height="50px"&gt;
          &lt;img src="image.png" height="50px" width="50px" /&gt;
       &lt;/td&gt;
       &lt;!-- etc --&gt; 
     &lt;/tr&gt;
     &lt;!-- etc --&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What CSS/HTML code should I use to change the height? According to Chrome element inspector, the height of the <code>&lt;td&gt;</code> element is 55px. (arb?)</p>
  
  <p><strong>EDIT</strong>: forgot I'm already setting cellpadding and spacing to 0. The image above is with them both at zero. Updated code sample.</p>
  
  <p><strong>EDIT</strong>: "Area A" doesn't exist in IE. Screenshot from Chrome.</p>