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>
2 Comments
If the td is generated dynamically and each of them has a table inside, how do I maintain equal spacing among them?
Hello Anushree,
If it is possible to add an padding-left and padding-right style to the generated td containing the table inside, these should then have an even spacing between them, for example:
Let me know if this is an option and how it works for you!
Kind Regards,
David