title: Why does IE render this HTML table differently?
body: <p>I'm trying to put together a simple HTML email using old school coding standards and I've hit a brick wall that I didn't foresee. Internet Explorer, even IE 11, renders a simple table differently to every other browser I've tried (Chrome, Firefox, Safari) and I can't figure out why.</p>
  
  <p>In terms of layout, it should look like this (note: colours are for illustration only -- <em>apologies to your eyes!</em>):</p>
  
  <p><img src="https://i.stack.imgur.com/zYtNK.gif" alt="enter image description here"></p>
  
  <p>But in IE it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/I9Yuv.gif" alt="enter image description here"></p>
  
  <p>The HTML is pretty simple:</p>
  
  <pre><code>&lt;table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff"&gt;
      &lt;tr&gt;
          &lt;td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3"&gt;
              Height: 250px
          &lt;/td&gt;
          &lt;td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42"&gt;
              Height: 42px
          &lt;/td&gt;
          &lt;td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2"&gt;
              Height: 116px
          &lt;/td&gt;
          &lt;td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3"&gt;
              Height: 250px
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" rowspan="2"&gt;
            &lt;div&gt;                            
                &lt;div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom"&gt;
                  Height: 208px
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134"&gt;
            &lt;div&gt;
            &lt;div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial"&gt;
                Height: 134px
              &lt;/div&gt;
                &lt;/div&gt;
          &lt;/td&gt;                            
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/mCLDh/" rel="nofollow noreferrer">http://jsfiddle.net/mCLDh/</a></p>
  
  <p>Am I doing something wrong, or is IE still messing with me after all these years?</p>
  
  <p>(Note: For the commenters who are unaware, you cannot use floats or absolute positioning in HTML emails. <em>That's</em> why I'm using code that looks like it came from 1998. It's ugly, but it's more supported by email clients.)</p>