Email Template
2019-01-04 本文已影响3人
Dino
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>
