Email Template

作者: Dino | 来源:发表于2019-01-04 22:44 被阅读3次

Email Template
Business email template
Jenkins 常用插件
2020-03-03 Email Template
即用即弃型邮箱
GeekBand-STL 第1周
明道整合email 功能
DJANGO邮件配置中碰到的问题记录
Email
email

If there’s only one thing you to know about coding email, it’s that tables rule the day. Forget that old “separation of structure, presentation, and behavior” nonsense you learned in standards-based web design. Unlike modern web design the <table> element isn’t used just for tabular data, it’s all there is for consistent structure. External CSS doesn’t drive the styling, either; emails depend on inlined CSS.

Tables Within Tables

For finer control of your HTML, try nesting <table> elements when building emails. At its simplest, an email should be at least two tables deep:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style></style>
    </head>
    <body>
        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
            <tr>
                <td align="center" valign="top">
                    <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
                        <tr>
                            <td align="center" valign="top">
                                This is where my content goes.
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

There’s a good reason; you must provide a table to serve as a redundant <body> element, as some email clients strip out the element when they render the email.

Code Responsively

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
    <tr>
        <td align="center" valign="top">
            <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
                <tr>
                    <td align="center" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
                            <tr>
                                <td align="center" valign="top">
                                    This is where my header content goes.
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
                            <tr>
                                <td align="center" valign="top">
                                    This is where my body content goes.
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
                            <tr>
                                <td align="center" valign="top">
                                    This is where my footer content goes.
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>