html 电子邮件包装表 - 固定宽度方法

Posted 2021-05-11

<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="wrappertable" style="table-layout:fixed;">
    <tr>
        <!--
            ALIGNING LAYOUTS TO THE CENTER:
            In some cases, you may want the whole email layout to be centered (mainly for desktop clients).
            Using the wrapping table cell approach is a clean way of doing it, removing the need for any <center> or <div> tags.
            It does mean however you'll need to use the align attribute on all table cells within to avoid content being centered.
        -->
        <td align="center" valign="top" id="wrappercell">
        <!--
            DEFINE YOUR LAYOUT APPROACH:
            When creating an email campaign there are several approaches you can take when developing the layout.
            The approach used is often dependant on the design of the email campaign itself.

            Fixed width layouts are common, but require the need of media query support to optimise them for mobile devices.
            The scalable/fluid approach removes the requirement for media query support but can force certain design requirements.

            This layout uses the fixed width approach by default.
        -->

            <!-- CONTAINER TABLE -->
            <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;" id="containertable">
                <tr>
                    <td align="left" valign="top" id="containercell">
                        <!--
                            PREVENT GMAIL APP AUTO-FIT/ZOOMING:
                            https://support.google.com/mail/answer/2951689
                            https://litmus.com/community/discussions/257-gmail-app-android-how-to-stop-text-from-auto-resizing

                            The Gmail App on Android 4.0 and above will modify an email to fit the device viewport.
                            Depending on the design, this can break various layouts and ends up being counterproductive
                            This feature can be disabled by setting min-width on an image that is equal size to the container table
                            For responsive designs the entire "gmailapp-android-fix" table can be hidden.
                        -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" id="gmailapp-android-fix" style="mso-hide:all;">
                            <tr>
                                <td align="left" valign="top" height="1" style="line-height:1px; height:1px; min-width:600px;">
                                    <img src="http://media.centralnottingham.ac.uk/App_Media/SNC/emailers/600x1-spacer.gif" alt="" style="display:block; min-width:600px;" width="600" height="1" />
                                </td>
                            </tr>
                        </table>

                        <!--
                            GAP ISSUES WITH LONG VERTICAL EMAILS IN OUTLOOK 2007 AND ABOVE:
                            http://www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010

                            If a single table element exceeds 23.7 inches (Approx 2275 pixels) in height, a page break will be added which can cause gaps.
                            The easiest solution is to break up major sections of an email template by starting new table elements to avoid this issue.
                        -->

                        <!--
                            CSS INHERITANCE ON TABLE CELLS IN OUTLOOK 2007 AND ABOVE:
                            http://blog.mailermailer.com/email-design/ultimate-field-guide-to-common-bugs-in-html-email
                            https://gist.github.com/jamesmacwhite/ddb075abde1de7d384ff

                            When a table contains more than one table cell within the same table, CSS properties applied to one cell
                            will be applied to all the cells within that table.
                        -->

                        <!--
                            WINDOWS PHONE AND FONT SIZES:
                            https://litmus.com/community/discussions/387-font-sizes-on-outlook-mobile-with-exchange-activesync-based-mailboxes
                            http://blog.jmwhite.co.uk/2014/08/19/email-campaigns-windows-phone-part-3-exchange-activesync

                            When Windows Phone renders with the EAS client, font sizes can appear inconsistent.
                            It occurs when the containing table/cells uses a fixed pixel width, along with several other factors.
                            Generally percentage based widths on tables work much better with Windows Phone when rendering with the EAS client.
                        -->

                        <!--
                            CONDITIONAL COMMENTS AND OUTLOOK.COM (WEBMAIL):
                            http://freshinbox.com/blog/outlook-com-removes-all-content-within-conditional-comments
                            https://www.campaignmonitor.com/forums/topic/7544/outlookcom-problems-with-conditional-comments-in-the-body
                            https://gist.github.com/jamesmacwhite/18e97b06f2c04661a757

                            Outlook.com and its pre-processor tends to strip conditional comments, as well as the content between them.
                            When IF ELSE logic is used this can cause problems in this client as both parts of the conditional will be removed.
                            In order to workaround this, alternative hiding techniques have to be used.
                        -->
                    </td>
                </tr>
            </table> <!-- END CONTAINER TABLE -->
        </td>
    </tr>
</table> <!-- END WRAPPER TABLE -->