title: Aligning images in HTML tables
body: <p>I have a 1x2 HTML table that will be the heading of an email. The first column contains a linked image, the second a heading.</p>
  
  <pre><code>        &lt;table&gt;         
          &lt;tr&gt;
              &lt;td width="50%" style="text-align:left; padding-left:10%;"&gt;
                  &lt;a target="_blank" href="http://www.google.com/"&gt;
                      &lt;img src="img/logo.jpg" alt="Logo" 
                      style="width:30%; height:30%;"
                       /&gt;
                  &lt;/a&gt;
              &lt;/td&gt;
  
              &lt;td width="50%" style="text-align:right; padding-right:10%;"&gt;
                  &lt;h2&gt;Order Confirmation&lt;/h2&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>As you can see, the image in the left cell is aligned left, and the heading in the right cell is aligned right, each element with 10% space from the edge (padding).</p>
  
  <p>PROBLEM: The dimensions of my image are being distorted! I have the img's width and height both set to 30%, but it's still getting distorted. I'm guessing this has something to do with the table, but I cannot figure it out. Let me know!</p>
  
  <p>ps: I have to use inline styling and tables for this project.</p>