單柱流體佈局

混合編碼的基本設定是單個流體柱。由於大多數電子郵件客戶端支援 max-width,我們可以使用它來將 <table> 的寬度設定為 100%(流體),但不超過最大寬度(在這種情況下為 660px)。就像在網上一樣。

但是,Windows 桌面 Microsoft 不支援 max-width 並且會以 100%的寬度呈現此表,因此我們使用 Microsoft 條件標籤來設定“ Ghost Tables ”,使 <table> 的寬度為 660px。Windows 桌面 Microsoft 僅限桌上型電腦,所以它不需要在小尺寸上流暢。而且由於 Windows 桌面 Microsoft 是唯一支援這些 Microsoft 條件標記的電子郵件客戶端,因此不會無意中將其他客戶端限制為 660px 桌面寬度。

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="">
    <tr>
        <td align="center" height="100%" valign="top" width="100%">
            <!--[if mso]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
            <tr>
            <td align="center" valign="top" width="660">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
                <tr>
                    <td align="center" valign="top">
                        <p>Content Goes Here.</p>
                    </td>
                </tr>
            </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>