Outlook 2010 table spacing weirdness

When coding a HTML email newsletter Outlook 2010 is acting up. (surprise surprise)

The following screenshot is the result: http://screencast.com/t/PSZqP7wg This screenshot shows what's happening (same, but images turned off): http://screencast.com/t/DrbexyHnytJ

Obviously, the middle white column is to narrow. Should be 604px wide, but is a lot less. It seems Outlook is placing extra padding next to the spacer images.

Anyone has an idea why this is happening?

This is the source in the body tag:

<table width="761" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
        </tr>
        <tr>
            <td width="77" style="width: 77px;">
                <img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
            </td>
            <td width="604" bgcolor="ffffff">
                test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
                hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
                klqshdf kqshdklf hqskldfqklsd
            </td>
            <td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
        </tr>
        <tr>
            <td height="151" colspan="3开发者_开发技巧">
                <img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
            </td>
        </tr>
    </table>

You just need to add a background color to both tags. the widths are displaying correctly.

I'm used to issues with "undefined" blank spaces and line breaks in IE and Outlook. They are usually interpreted as a real, wanted space, formatted by style of the nearest parent (if any). That's why i prefer writing htm like this:

    <tr>
        <td height="151" colspan="3"><img 
           src="http://www.bothino.be/newsletter/bottom.jpg"
           width="761" height="151" alt="" /></td>
    </tr>

Line breaks inside a tag will make no difference at display time ... but apply a similar structure to the code. The important part is no blank between TD and IMAGE tag.

Maybe, this doesn't explain and solve that huge indentions in your screenshot.

my experience with Outlook is to never ever never ever use the rowspan and colspan attributes. This is guaranteed to cause trouble. Should a table cell require a different layout/width than the one above/below it, nest another right into it with the correct layout. this way the overall basic grid stays intact. Not nice, but then again: outlook plays dirty and so will you (have to). All tables need to have cellpaddign=0 and cellspacing=0. This helps me to get over similar issues.

sometimes it's better to leave out width for td's eg leave out width=77 and rest of width for all td's. that way it can expand automatically to fill the entire row. or you can also include a table withing that tr.