HTML邮件：如何让2行4列表格在Outlook 2007-2016中正常渲染

Ah, the classic Windows Outlook HTML rendering headache—we’ve all been there! The problem here is that Outlook 2007-2016 relies on the Word rendering engine, which ignores many modern CSS properties and sticks to strict, old-school rules for table layouts. Let’s break down the fixes for your centered table and formatting glitches:

Key Problems & Targeted Solutions #

• Centering fails in Outlook: margin:auto gets ignored by Outlook’s renderer. Instead, wrap your table in a <center> tag and add the align="center" attribute to the outer table (it’s retro, but it’s the most reliable fix for Outlook).
• CSS properties are overlooked: Outlook prioritizes HTML attributes (like width, height, bgcolor) over inline CSS for tables and cells. Combine both attributes and CSS to support all email clients.
• Invalid unit in cellspacing: cellspacing="20px" is invalid—Outlook doesn’t recognize the px suffix here; use cellspacing="20" instead.
• Button styling glitches: mso-hide:all can cause unexpected behavior, and Outlook needs explicit attribute-based styling for background colors and text alignment to render correctly.

Modified Working Code #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>
</head>
<body>
    <!-- Wrap in center tag for Outlook centering -->
    <center>
        <!-- Use align="center" and attribute-based width/height -->
        <table align="center" height="100" width="550" cellspacing="20" style="font-style:normal; font-family:Arial, Helvetica, sans-serif; color:#000; font-size: 10.53pt; background-color: #e6e6e6; margin:auto;">
            <tr>
                <td colspan="4">
                    <table width="100%" style="width:100%;">
                        <tr height="30">
                            <td width="50" style="text-align: center;">Login:</td>
                            <td width="200" bgcolor="#fff" style="text-align: center; color: #7e7e7e;">###</td>
                            <td width="75" style="text-align: center;">Password:</td>
                            <td width="200" bgcolor="#fff" style="text-align: center; color: #7e7e7e;">###</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <table width="100%" style="width:100%;">
                        <tr height="30">
                            <td></td>
                            <!-- Use bgcolor attribute and explicit styling for Outlook -->
                            <td bgcolor="#9f1b32" width="200" style="text-align: center; color: #fff; font-weight: bold; font-size:12px; line-height:30px; text-decoration:none;">RENEW NOW ></td>
                            <td></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </center>
</body>
</html>

Additional Pro Tips #

• Always test your HTML emails across multiple clients—Outlook’s renderer is notoriously picky, so combining HTML attributes with inline CSS is the safest approach for broad compatibility.
• Avoid overly complex nested tables where possible, but if you need them, ensure every table/td has explicit width/height attributes (not just CSS).
• For buttons, using a table cell with bgcolor is far more reliable than CSS background-color in older Outlook versions.

内容的提问来源于stack exchange，提问作者ginomay89