Space 在两个 html 电子邮件表之间 Outlook 2007、2013

Question

快速提问，我有两个并排的桌子，一切都很好，但在 Outlook 2007 和 2013 中，这两张桌子的中间有 space。大约 50px 宽度。

我已经尝试了几乎所有我能想到的方法。

这是我的资料。

<table border="0"  cellpadding="0" cellspacing="0" align="left" class="w640" width="320">
    <tr><!-- Spacer --> <td height="10" width="100%"></td></tr>
    <tr>
        <td class="w640" height="320" width="320">
        <img src="image.jpg" alt="" style="display: block;" class="w640" height="320" width="320">
        </td>
    </tr>
    <tr><!-- Spacer --> <td height="10" width="100%"></td></tr>
</table>


<table border="0" cellpadding="0" cellspacing="0" align="right" class="w640" height="285" width="320" style="display: block;">
    <tr>
        <td class="h0" height="40" width="100%"></td>
    </tr>
    <tr>
        <td bgcolor="#4f77bd" class="w640" width="320">
            <table valign="center" align="center" valign="top" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
            <tr><!-- Spacer --> <td height="15" width="100%"  colspan="3"></td></tr>
            <tr>
                <td bgcolor="#4f77bd" width="20"></td>
                <td align="center" width="280">
                    <h2 style="font-size: 24px; font-family: Arial, sans-serif; color: #ffffff; margin-bottom: 0; margin-top: 0; text-align: center;">Freeman moves to take organisation globally</h2>          
                </td>
                <td bgcolor="#4f77bd" width="20"></td>
            </tr>
            <tr><!-- Spacer --> <td height="20" width="100%" colspan="3"></td></tr>
            <tr>
                <td bgcolor="#4f77bd" width="20"></td>
                <td align="center" width="280">
                    <p style="font-size: 15px; font-family: 'Verdana', Arial, Helvetica; color: #ffffff; margin-bottom: 0; margin-top: 0; text-align: center;">Name is to focus her future activities on creating an international base for House and its services.</p>
                </td>
                <td bgcolor="#4f77bd" width="20"></td>
            </tr>
            <tr><!-- Spacer --> <td height="20" width="100%"  colspan="3"></td></tr>
            <tr>
                <td bgcolor="#4f77bd" width="20"></td>
                <td align="center" width="280">
                    <p  style="margin-bottom: 0; margin-top: 0; text-align: center;">
                        <a href="#" style="color: #ffffff;">READ MORE</a>
                    </p>
                </td>
                <td bgcolor="#4f77bd" width="20"></td>
            </tr>
            <tr><!-- Spacer --> <td height="25" width="100%" colspan="3"></td></tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="h0" height="20" width="100%"></td>
    </tr>
</table>

我不确定我的代码有什么问题。

Answer 1

你的第二个 table 有属性 align="right" 和属性 display:block。尝试删除那些东西。希望这会得到修复..

HTML

<table border="0" cellpadding="0" cellspacing="0" align="left" class="w640" width="320">
    <tr>
        <!-- Spacer -->
        <td height="10" width="100%"></td>
    </tr>
    <tr>
        <td class="w640" height="320" width="320">
            <img src="image.jpg" alt="" style="display: block;" class="w640" height="320" width="320">
        </td>
    </tr>
    <tr>
        <!-- Spacer -->
        <td height="10" width="100%"></td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="" class="w640" height="285" width="320" style="">
    <tr>
        <td class="h0" height="40" width="100%"></td>
    </tr>
    <tr>
        <td bgcolor="#4f77bd" class="w640" width="320">
            <table valign="center" align="center" valign="top" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
                <tr>
                    <!-- Spacer -->
                    <td height="15" width="100%" colspan="3"></td>
                </tr>
                <tr>
                    <td bgcolor="#4f77bd" width="20"></td>
                    <td align="center" width="280">
                         <h2 style="font-size: 24px; font-family: Arial, sans-serif; color: #ffffff; margin-bottom: 0; margin-top: 0; text-align: center;">Freeman moves to take organisation globally</h2> 
                    </td>
                    <td bgcolor="#4f77bd" width="20"></td>
                </tr>
                <tr>
                    <!-- Spacer -->
                    <td height="20" width="100%" colspan="3"></td>
                </tr>
                <tr>
                    <td bgcolor="#4f77bd" width="20"></td>
                    <td align="center" width="280">
                        <p style="font-size: 15px; font-family: 'Verdana', Arial, Helvetica; color: #ffffff; margin-bottom: 0; margin-top: 0; text-align: center;">Name is to focus her future activities on creating an international base for House and its services.</p>
                    </td>
                    <td bgcolor="#4f77bd" width="20"></td>
                </tr>
                <tr>
                    <!-- Spacer -->
                    <td height="20" width="100%" colspan="3"></td>
                </tr>
                <tr>
                    <td bgcolor="#4f77bd" width="20"></td>
                    <td align="center" width="280">
                        <p style="margin-bottom: 0; margin-top: 0; text-align: center;"> <a href="#" style="color: #ffffff;">READ MORE</a>

                        </p>
                    </td>
                    <td bgcolor="#4f77bd" width="20"></td>
                </tr>
                <tr>
                    <!-- Spacer -->
                    <td height="25" width="100%" colspan="3"></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="h0" height="20" width="100%"></td>
    </tr>
</table>

Fiddle Demo

Space 在两个 html 电子邮件表之间 Outlook 2007、2013

Space between two html email tables Outlook 2007, 2013

html

outlook

html-email