两个html电子邮件表Outlook 2007,2013之间的空间

时间:2015-02-06 09:17:44

标签: html outlook html-email

快速提问,我有两张桌子坐在一起,一切都很好,但在Outlook 2007和2013上,这两张桌子中间有空间。宽度约为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>

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

1 个答案:

答案 0 :(得分:0)

你的第二张桌子有一个attr 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