Я пытаюсь создать шаблон электронной почты, в котором верхний и нижний колонтитулы разделены, а тело находится в отдельном файле.
Заголовок:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
body {
margin: 10px 0;
padding: 0 10px;
font-size: 15px;
}
p {
margin: 1.25em 0px;
line-height: 22px;
}
body,
#bodyTable,
#footerTable {
background-color: #e9ebee;
font-size: 15px;
font-family: 'Arial,Helvetica,sans-serif';
}
table {
border-collapse: collapse;
}
.inner-table {
border-radius: 4px;
}
td {
font-family: arial, sans-serif;
color: #222222;
}
@media only screen and (max-width: 480px) {
body {
margin: 0px;
padding: 0px 10px;
}
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: none !important;
font-size: 16px;
}
table {
width: 100% !important;
}
}
</style>
</head>
<body>
<table>
<tr>
<td>
Logo here
</td>
</tr>
</table>
Тело:
<!-- Include Header -->
<% include header %>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="bodyTable">
<tr>
<td style="padding: 0px 10px 20px 10px;">
<table border="0" cellpadding="0" cellspacing="0" class="inner-table" align="center" width="640"
bgcolor="#FFFFFF">
<tr>
<td style="padding: 20px;">
<p>Hello <%= nameProperty %>,</p>
<p>Thank you for signing up at</p>
<p>To verify your email address and activate your account, please click the button below:
</p>
<div style="text-align: center;">
<a href="#"
style="background-color: #02b875; color: #fff; padding: 12px 33px; text-decoration: none; border-radius: 2px; font-weight: bold; display: inline-block;">Activate your account</a>
</div>
<p>Regards,<br>
XXX</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Include Footer -->
<% include footer %>
Нижний колонтитул:
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="footerTable">
<tr>
<td align="center" style="padding: 10px 10px 0px 10px;">
<div>
<a href="#"><img
src="https://www.mail-signatures.com/wp-content/uploads/2014/08/Facebook.png" width="32"></a>
<a href="#"><img
src="https://www.mail-signatures.com/wp-content/uploads/2014/08/Twitter.png" width="32"></a>
<a href="#"> <img
src="https://www.mail-signatures.com/wp-content/uploads/2014/08/Linkedin.png" width="32"></a>
</div>
</td>
</tr>
<tr>
<td align="center" style="padding: 10px 10px 50px 10px;">
<div style="color: #8f949b; font-size: 13px;">
Need help? Visit our <a href="#" target="_blank"
style="color: #8f949b; font-size: 13px;">help centre</a>
</div>
</td>
</tr>
</table>
</body>
</html>
Если вы заметили, что в заголовке есть одна таблица для отображения lo go, в теле есть другая таблица для отображения тела, а в нижнем колонтитуле есть третья таблица для отображения нижнего колонтитула. Когда он отображается в GMail, таблица заголовка lo go не отображается, а также не указывается интервал между идентификаторами таблицы нижнего колонтитула и другие вещи. Я прилагаю скриншот элемента Inspect того, как Gmail iis его отображает.
Может кто-нибудь сказать мне, почему Google, AOL, Yahoo не отображают таблицу lo go и почему она не обнаруживает id и другие теги нижний колонтитул? и как это исправить? Я что-то не так делаю?
