The following screenshot shows where the extra gap is being created.

This is a nested table. The outer table contains 2 table rows, with each table row containing 2 table cells. Each table cell consists of another table with all of the contents filled in. The focus is on the outer table and the table cells, because the extra gap shown is created by the table cells.

The code given below shows how the tables with the marked gap in the middle are created:

<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" style="">
<tr>
<td style="vertical-align: top; text-align: center;">
<![endif]-->
<!-- Deal start. -->
<table class="deal_table_size" style="display: inline-block; font-family: Arial; width: 309px; height: auto; font-size: 16px; border-collapse: collapse; border-left: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; border-top: 3px solid #6736A3; margin: 3px; background-color: #ffffff;" width="300" height="300">
  <tr>
    <td class="deal_background_image" colspan="3" style="text-align: left; vertical-align: top; border-collapse: collapse; background-color: #ffffff; padding: 0px; background-image: url(http://d2z2x9m6jf98op.cloudfront.net/offer-deal/8f/8f07ef03-e822-49d0-a11c-8ebdfa1f023b.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 140px; height: 144px;">
      <!--[if mso]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" href="https://www.google.com" style="text-align: center;width:300px;height:200px;background-repeat: no-repeat;background-position:center center;background-size: contain; vertical-align: middle;">
      <v:fill type="frame" src="http://d2z2x9m6jf98op.cloudfront.net/offer-deal/8f/8f07ef03-e822-49d0-a11c-8ebdfa1f023b.jpg" color="#ddf3e9" />
      <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div style="width: 100%;">
        <table border="0" cellpadding="0" cellspacing="0" padding="0" margin="0" style="width: 100%;">
          <tr>
            <td class="deal_header" style="vertical-align: top; text-align: left;">
              <img src="http://d2z2x9m6jf98op.cloudfront.net/email/coupon-header-deal-new.png" style="width: 60px;" />
            </td>
            <td style="vertical-align: middle; text-align: right; width: 80px;">
              <table style="width: 100%; margin: 0; table-layout: fixed; text-align: center;">
                <tr>
                  <td>
                    <img class="iphone_free_shipping" src="http://d2z2x9m6jf98op.cloudfront.net/free-shipping.png" class="shipping-image" title="Free Shipping" />
                  </td>
                  <td>
                    <span style="color: #1989CE; font-size: 80%; vertical-align: middle; text-align: right; font-weight: bold; font-family: Arial;">
                      $75+
                    </span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
      <div style="width: 100%; text-align: center; vertical-align: middle;">
        <a href="http://www.google.com" style="vertical-align: middle; text-align: center; width: 100%;">
          <img src="http://d2z2x9m6jf98op.cloudfront.net/spacer.gif" style="width: 50%; height: 100%; vertical-align: middle; text-align: center;" />
        </a>
      </div>
      <!--[if mso]>
      </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
  <tr>
    <td colspan="3" style="vertical-align: middle; text-align: left; padding-left: 10px;">
      <span style="font-weight: bold;">Anker PowerCore Ultra-Compact 5000mAh External Battery</span>
    </td>
  </tr>
  <tr>
    <td colspan="3" style="vertical-align: middle; text-align: left; font-size: 80%; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;">
      <b>
        <span style="font-size: 110%;">$146.77</span>
      </b>
      <s>$329.99</s> at Newegg.
    </td>
  </tr>
  <tr>
    <td colspan="3" style="vertical-align: middle; text-align: left; font-weight: bold; color: #74B818; padding-left: 10px;">
      <span style="font-size: 100%;">After 1.5% Cash Back</span>
      <br />&nbsp;
    </td>
  </tr>
</table>
<!-- Deal ends -->
<!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
<td style="vertical-align: top; text-align: center;">
<![endif]-->
<!-- Deal start. -->
<table class="deal_table_size" style="display: inline-block; font-family: Arial; width: 309px; height: auto; font-size: 16px; border-collapse: collapse; border-left: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; border-top: 3px solid #6736A3; margin: 3px; background-color: #ffffff;" width="300" height="300">
  <tr>
    <td class="deal_background_image" colspan="3" style="text-align: left; vertical-align: top; border-collapse: collapse; background-color: #ffffff; padding: 0px; background-image: url(http://d2z2x9m6jf98op.cloudfront.net/offer-deal/8f/8f07ef03-e822-49d0-a11c-8ebdfa1f023b.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 140px; height: 144px;">
      <!--[if mso]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" href="https://www.google.com" style="text-align: center;width:300px;height:200px;background-repeat: no-repeat;background-position:center center;background-size: contain; vertical-align: middle;">
      <v:fill type="frame" src="http://d2z2x9m6jf98op.cloudfront.net/offer-deal/8f/8f07ef03-e822-49d0-a11c-8ebdfa1f023b.jpg" color="#ddf3e9" />
      <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div style="width: 100%;">
        <table border="0" cellpadding="0" cellspacing="0" padding="0" margin="0" style="width: 100%;">
          <tr>
            <td class="deal_header" style="vertical-align: top; text-align: left;">
              <img src="http://d2z2x9m6jf98op.cloudfront.net/email/coupon-header-deal-new.png" style="width: 60px;" />
            </td>
            <td style="vertical-align: middle; text-align: right; width: 80px;">
              <table style="width: 100%; margin: 0; table-layout: fixed; text-align: center;">
                <tr>
                  <td>
                    <img class="iphone_free_shipping" src="http://d2z2x9m6jf98op.cloudfront.net/free-shipping.png" class="shipping-image" title="Free Shipping" />
                  </td>
                  <td>
                    <span style="color: #1989CE; font-size: 80%; vertical-align: middle; text-align: right; font-weight: bold; font-family: Arial;">
                      $75+
                    </span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
      <div style="width: 100%; text-align: center; vertical-align: middle;">
        <a href="http://www.google.com" style="vertical-align: middle; text-align: center; width: 100%;">
          <img src="http://d2z2x9m6jf98op.cloudfront.net/spacer.gif" style="width: 50%; height: 100%; vertical-align: middle; text-align: center;" />
        </a>
      </div>
      <!--[if mso]>
      </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
  <tr>
    <td colspan="3" style="vertical-align: middle; text-align: left; padding-left: 10px;">
      <span style="font-weight: bold;">Anker PowerCore Ultra-Compact 5000mAh External Battery</span>
    </td>
  </tr>
  <tr>
    <td colspan="3" style="vertical-align: middle; text-align: left; font-size: 80%; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;">
      <b>
        <span style="font-size: 110%;">$146.77</span>
      </b>
      <s>$329.99</s> at Newegg.
    </td>
  </tr>
  <tr>
    <td colspan="3" style="vertical-align: middle; text-align: left; font-weight: bold; color: #74B818; padding-left: 10px;">
      <span style="font-size: 100%;">After 1.5% Cash Back</span>
      <br />&nbsp;
    </td>
  </tr>
</table>
<!-- Deal ends -->

It is the following code snippet from above that I just couldn't figure out how to solve the extra gap in between the table cells:

<!-- Deal ends -->
<!--[if mso]>
</td>
<![endif]-->

<!-- Not sure what needs to go in here.  -->

<!--[if mso]>
<td style="vertical-align: top; text-align: center;">
<![endif]-->
<!-- Deal start. -->

The current technique I'm doing is to center align the table cells inside the <td> of that specified table row. This forces the table cells to reposition themselves so they are always in the center for each table cells, but this causes the issue where the empty spaces in the middle are larger than the empty spaces at the edges.

Perhaps there are better ways to repositioning the table cells, so I can have equal empty spaces at the edges and in the middle. How do I solve this issue in all editions of Outlook from 2007?