Remove gaps between tables in Outlook 2007 and 2010

Outlook 2007 and 2010 can be a little tricky when it comes to stacking tables side by side or top to bottom, where you may see some undesired gaps between your tables.

The following steps will remove gaps between tables:

1. Add border-collapse styling to your embedded CSS

  <style type="text/css">
    table {border-collapse: collapse;}
  </style>

2. Set the border, cellpadding and cellspacing value to 0 for each table

  <table border="0" cellpadding="0" cellspacing="0">

Alternatively, to place 2 or more table next to each other, you can nest these within a table.

For example, let’s say your email has a width of 620 pixels and would like to have 3 tables with a width of 200 pixels next to each other. You can create a table with a width of 620 pixels, containing 1 row and 3 columns. The left column will have a width of 210 pixels, the middle column 200 pixels and the right column 210 pixels again. Within these columns, we will place our 3 tables of 200 pixels, 1 in each column.

In the first column, we will align the table left. In the second column to keep the table centered and spacing even between table 1 and 3, we will align the table centered. In the third column, we will align the table right, each table now has a spacing of 10 pixels between them.

The end result:

  <style type="text/css">
    table {border-collapse: collapse;}
  </style>

  <table width="620" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="210" valign="top">
          <table width="200" border="0" cellpadding="0" cellspacing="0" align="left">
              <tr>
                <td>Table 1</td>
              </tr>
          </table>
        </td>
        <td width="200" valign="top">
          <table width="200" border="0" cellspacing="0" cellpadding="0" align="center">
              <tr>
                <td>Table 2</td>
              </tr>
          </table>
        </td>
        <td width="210" valign="top">
          <table width="200" border="0" cellpadding="0" cellspacing="0" align="right">
              <tr>
                <td>Table 3</td>
              </tr>
          </table>
        </td>
      </tr>
  </table>