Css 响应式电子邮件设计中的填充
我似乎找不到一个明确的答案来回答我的问题，尤其是因为这对我来说是一个全新的领域，我觉得这有点棘手，但我就快到了：） 我基本上是想在电子邮件顶部的社交图标中添加一个填充样式，以便在调整浏览器大小时（基本上是在智能手机上查看），每个图标之间有足够的空间 当屏幕处于全尺寸时，它具有相等的间距，因为它所在的列是松散定义的。这将是伟大的，不必欺骗和使用一个图像，而是间距踢生效，因为屏幕减少过去的断点 代码如下：Css 响应式电子邮件设计中的填充,css,responsive-design,media-queries,html-email,Css,Responsive Design,Media Queries,Html Email,我似乎找不到一个明确的答案来回答我的问题，尤其是因为这对我来说是一个全新的领域，我觉得这有点棘手，但我就快到了：） 我基本上是想在电子邮件顶部的社交图标中添加一个填充样式，以便在调整浏览器大小时（基本上是在智能手机上查看），每个图标之间有足够的空间 当屏幕处于全尺寸时，它具有相等的间距，因为它所在的列是松散定义的。这将是伟大的，不必欺骗和使用一个图像，而是间距踢生效，因为屏幕减少过去的断点 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
<!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>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ZURBemails</title>
<link href="stylesheets/email2.css" rel="stylesheet" type="text/css" />
<style>
@charset "UTF-8";
/* CSS Document */
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
.btn {
text-decoration:none;
color: #FFF;
background-color: #666;
padding:10px 16px;
font-weight:bold;
margin-right:10px;
text-align:center;
cursor:pointer;
display: inline-block;
}
p.callout {
padding:15px;
background-color:#ECF8FF;
margin-bottom: 15px;
}
.callout a {
font-weight:bold;
color: #2BA6CB;
}
p.subtext {
padding:0 15px;
margin-bottom: 15px;
}
.subtext a {
font-weight:bold;
color: #2BA6CB;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size:12px;
margin-bottom:10px;
text-decoration:none;
color: #FFF;font-weight:bold;
display:block;
text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.gp { background-color: #DB4A39!important; }
a.ms { background-color: #000!important; }
.body-wrap tr .container .content .nav {
text-align: center;
color:#696969;
margin-top:-10px;
margin-bottom:5px;
line-height:1.5;
}
.body-wrap tr .container .content .nav a {
text-decoration:none;
color:#696969;
}
.sidebar .soc-btn {
display:block;
width:100%;
}
p.topNote { border-top: 4px solid #1b3281; margin-top:-2px;}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap { width: 100%;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap { width: 100%; clear:both!important;
}
.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p {
font-size:10px;
font-weight: bold;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:bold; font-size: 27px; color:#1b3180;}
h2 { font-weight:bold; font-size: 22px; color:#1b3180;}
h3 { font-weight:900; font-size: 22px; color:#0166b1;}
h4 { font-weight:500; font-size: 20px; color:#0166b1;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
.collapse { margin:0!important;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:14px;
line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* -------------------------------------
SIDEBAR
------------------------------------- */
ul.sidebar {
background:#ebebeb;
display:block;
list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
text-decoration:none;
color: #666;
padding:10px 16px;
/* font-weight:bold; */
margin-right:10px;
/* text-align:center; */
cursor:pointer;
border-bottom: 1px solid #777777;
border-top: 1px solid #FFFFFF;
display:block;
margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display:block!important;
max-width:640px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:15px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }
/* Odds and ends */
.column {
width: 300px;
float:left;
}
.column tr td { padding: 15px; }
.column-wrap {
padding:0!important;
margin:0 auto;
max-width:600px!important;
}
.column table { width:100%;}
.social .column {
width: 280px;
min-width: 279px;
float:left;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
.double .column {
width: 280px;
min-width: 279px;
float:left;
}
.socialicons { padding-left:3px; }
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 600px) {
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
div[class="column"] { width: auto!important; float:none!important;}
table.social div[class="column"] {
width:auto!important;
}
/* flex the hero image */
.container img { width:100% !important; }
}
</style>
</head>
<body bgcolor="#ececec">
<!-- HEADER -->
<table class="head-wrap" bgcolor="#ffffff" width="100%">
<tr>
<td></td>
<td class="header container">
<div class="content">
<table bgcolor="#ffffff">
<tr>
<td height="42" style=" padding-right:10px;">
<img src="http://placehold.it/500x26"></td>
<td rowspan="4" align="right"><img src="http://www.google.co.uk/emails/Template2013/images/atol.jpg"/></td>
</tr>
<tr>
<td style="color: #CCCCCC;"><img src="http://placehold.it/265x20"></td>
</tr>
<tr>
<td style="color: #CCCCCC;"> </td>
</tr>
<tr>
<td style="color: #CCCCCC;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="31%"> </td>
<td width="30%"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td style="color: #CCCCCC;"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="socialicons">
<tr>
<td width="51%"> </td>
<td width="13%"> </td>
<td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook icon" width="24" height="23" border="0" class="socialicons"/></td>
<td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td width="6%"><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /HEADER -->
<!-- BODY -->
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<div class="content">
<table class="nav" width="100%">
<tr>
<td class="container" bgcolor="#FFFFFF">
<a href="http://www.google.co.uk/ski-resorts/austria-ski-holidays/?em=cs080213" target="_blank">Austria</a> |
<a href="http://www.google.co.uk/ski-resorts/france-ski-holidays/?em=cs080213" target="_blank" >France</a> |
<a href="http://www.google.co.uk/ski-resorts/italy-ski-holidays/?em=cs080213" target="_blank" > Italy</a> |
<a href="http://www.google.co.uk/ski-resorts/switzerland-ski-holidays/?em=cs080213" target="_blank" >Switzerland</a> |
<a href="http://www.google.co.uk/ski-resorts/canada-ski-holidays/?em=cs080213" target="_blank" > Canada</a> |
<a href="http://www.google.co.uk/ski-resorts/usa-ski-holidays/?em=cs080213" target="_blank" > USA</a> |
<a href="http://www.google.co.uk/ski-resorts/ski-holidays/?em=cs080213" target="_blank"> All Ski destinations</a></td>
</tr>
</table>
<table>
<tr>
<td>
<!-- A Real Hero (and a real human being) -->
<p><img src="http://www.google.co.uk/emails/Template2013/images/hero_image_template.jpg" />
</p><!-- /hero -->
<p class="topNote"></p>
<!-- Callout Panel -->
<h1>Welcome Mr Smith,</h1>
<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
</p>
<br />
<h3>Subheader 1</h3>
<p class="subtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<table class="double" width="100%">
<tr>
<td>
<!--- column 1 -->
<table align="center" class="column">
<tr>
<td>
<p><img src="http://placehold.it/280x150" /></p>
</td>
</tr>
</table><!-- /column 1 -->
<!--- column 2 -->
<table align="left" class="column" bgcolor="">
<!--<tr bgcolor="#1b3281">
<td>
<p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
</td>
</tr>-->
<tr>
<td>
<h4>Delta Whistler Village</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis autem vel eum iriure dolor in hendrerit in </p></td>
</tr>
</table> <!-- /column 2 -->
</td>
</tr>
</table> <br />
<table class="double" width="100%">
<tr>
<td>
<!--- column 1 -->
<table align="center" class="column">
<tr>
<td>
<p><img src="http://placehold.it/280x150" /></p>
</td>
</tr>
</table><!-- /column 1 -->
<!--- column 2 -->
<table align="left" class="column" bgcolor="">
<!--<tr bgcolor="#1b3281">
<td>
<p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
</td>
</tr>-->
<tr>
<td>
<h4>Delta Whistler Village</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis autem vel eum iriure dolor in hendrerit in </p></td>
</tr>
</table> <!-- /column 2 -->
</td>
</tr>
</table>
<!-- A Real Hero (and a real human being) -->
<p> </p><!-- /hero -->
<!-- Callout Panel -->
<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#">Do it Now! »</a>
</p><!-- /Callout Panel -->
<h3>Title Ipsum <small>This is a note.</small></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a class="btn">Click Me!</a>
<br/>
<br/>
<!-- social & contact -->
<table class="social" width="100%">
<tr>
<td>
<!--- column 1 -->
<table align="left" class="column">
<tr>
<td>
<h5 class="">Connect with Us:</h5>
<p class=""><a href="#" class="soc-btn fb">Facebook</a> <a href="#" class="soc-btn tw">Twitter</a> <a href="#" class="soc-btn gp">Google+</a></p>
</td>
</tr>
</table><!-- /column 1 -->
<!--- column 2 -->
<table align="left" class="column">
<tr>
<td>
<h5 class="">Contact Info:</h5>
<p>Phone: <strong>408.341.0600</strong><br/>
Email: <strong><a href="emailto:hseldon@trantor.com">hseldon@trantor.com</a></strong></p>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear"></span>
</td>
</tr>
</table><!-- /social & contact -->
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /BODY -->
<!-- FOOTER -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p>
<a href="#">Terms</a> |
<a href="#">Privacy</a> |
<a href="#"><unsubscribe>Unsubscribe</unsubscribe></a>
</p>
</td>
</tr>
</table>
</div><!-- /content -->
</td>
<td></td>
</tr>
</table><!-- /FOOTER -->
</body>
</html>
祖尔比邮件
@字符集“UTF-8”；
/*CSS文档*/
/* -------------------------------------
全球的
------------------------------------- */
* {
保证金：0；
填充：0；
}
*{字体系列：“Helvetica Neue”，“Helvetica”，Helvetica，Arial，无衬线；}
img{
最大宽度：100%；
}
.崩溃{
保证金：0；
填充：0；
}
身体{
-webkit字体平滑：抗锯齿；
-webkit文本大小调整：无；
宽度：100%！重要；
身高：100%；
}
/* -------------------------------------
元素
------------------------------------- */
a{color:#2BA6CB；}
.btn{
文字装饰：无；
颜色：#FFF；
背景色：#666；
填充：10px 16px；
字体大小：粗体；
右边距：10px；
文本对齐：居中；
光标：指针；
显示：内联块；
}
p、 标注{
填充：15px；
背景色：#ECF8FF；
边缘底部：15px；
}
.详图索引a{
字体大小：粗体；
颜色：#2BA6CB；
}
p、 潜台词{
填充：0 15px；
边缘底部：15px；
}
.潜台词a{
字体大小：粗体；
颜色：#2BA6CB；
}
表3.社会福利{
/*填充：15px*/
背景色：#ebebebeb；
}
.soc.btn{
填充：3px7px；
字体大小：12px；
边缘底部：10px；
文字装饰：无；
颜色：#FFF；字体大小：粗体；
显示：块；
文本对齐：居中；
}
a、 fb{背景色：#3B5998！重要；}
a、 tw{背景色：#1背景！重要；}
a、 gp{背景色：#DB4A39！重要；}
a、 ms{背景色：#000！重要；}
.body wrap tr.container.content.nav{
文本对齐：居中；
颜色：#6969；
利润上限：-10px；
边缘底部：5px；
线高：1.5；
}
.body wrap tr.container.content.nav a{
文字装饰：无；
颜色：#6969；
}
.侧栏.soc btn{
显示：块；
宽度：100%；
}
p、 顶部注释{边框顶部：4px实心#1b3281；边距顶部：-2px；}
/* -------------------------------------
标题
------------------------------------- */
table.head-wrap{宽度：100%；}
.header.container表td.logo{padding:15px；}
.header.container表td.label{padding:15px；padding left:0px；}
/* -------------------------------------
身体
------------------------------------- */
table.body-wrap{宽度：100%；}
/* -------------------------------------
页脚
------------------------------------- */
table.footer-wrap{width:100%；clear:both！重要；
}
.footer wrap.container td.content p{边框顶部：1px实心rgb（215215215215）；填充顶部：15px；}
.footer wrap.container td.content p{
字体大小：10px；
字体大小：粗体；
}
/* -------------------------------------
印刷术
------------------------------------- */
h1、h2、h3、h4、h5、h6{
字体系列：“HelveticaNeue Light”、“Helvetica Neue Light”、“Helvetica Neue”、“Helvetica Neue”、Helvetica、Arial、“Lucida Grande”、无衬线字体；线条高度：1.1；边距底部：15px；颜色：000；
}
h1小，h2小，h3小，h4小，h5小，h6小{字体大小：60%；颜色：#6f6f6f；行高：0；文本转换：无；}
h1{字体大小：粗体；字体大小：27px；颜色：#1b3180；}
h2{字体大小：粗体；字体大小：22px；颜色：#1b3180；}
h3{字体大小：900；字体大小：22px；颜色：#0166b1；}
h4{字体大小：500；字体大小：20px；颜色：#0166b1；}
h5{字号：900；字号：17px；}
h6{字体大小：900；字体大小：14px；文本转换：大写；颜色：#444；}
.collapse{margin:0！重要；}
p、 ul{
边缘底部：10px；
字体大小：正常；
字体大小：14px；
线高：1.6；
}
p、 铅{字体大小：17px；}
p、 最后{页边距底部：0px；}
ulli{
左边距：5px；
列表样式位置：内部；
}
/* -------------------------------------
边栏
------------------------------------- */
ul.侧栏{
背景：#ebebeb；
显示：块；
列表样式类型：无；
}
ul.sidebar li{显示：块；边距：0；}
侧边栏{
文字装饰：无；
颜色：#666；
填充：10px 16px；
/*字体大小：粗体*/
右边距：10px；
/*文本对齐：居中*/
光标：指针；
边框底部：1px实心#777777；
边框顶部：1px实心#FFFFFF；
显示：块；
保证金：0；
}
ul.sidebar li a.last{边框底部宽度：0px；}
侧边栏li a h1，侧边栏li a h2，侧边栏li a h3，侧边栏li a h4，侧边栏li a h5，侧边栏li a h6，侧边栏li a p{页边距底部：0！重要；}
/* ---------------------------------------------------
响应性
从轨道上发射核弹。这是唯一确定的方法。
------------------------------------------------------ */
/*设置最大宽度，并使其显示为块，这样它将自动拉伸到该宽度，但在手机或其他设备上也会缩小*/
.集装箱{
显示：块！重要；
最大宽度：640px！重要；
边距：0自动！重要；/*使其居中*/
清楚：两者都有！很重要；
}
/*这也应该是一个块元素，这样它将填充100%的.container*/
.内容{
填充：15px；
最大宽度：600px；
保证金：0自动；
显示：块；
}
/*让我们确保内容区域中的表是100%宽的*/
.内容表{宽度：100%；}
/*零碎*/
.栏目{
宽度：300px；
浮动：左；
}
.tr列td{padding:15px；}
.column wrap{
填充：0！重要；
保证金：0自动；
max-w
.socialicons { padding-left: 14%; }
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="socialicons">
<tr>
<td width="51%"> </td>
<td width="10%"> </td>
<td width="8%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook icon" width="24" height="23" border="0" class="socialicons"/></td>
<td> </td>
<td width="7%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td> </td>
<td width="7%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td> </td>
<td width="8%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td> </td>
<td width="6%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
</tr>
</table>
<td width="8%" style="min-width:20px (or whatever your pixel width for the icon is); ... width:20px\9;"><img>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/spacer.gif" width="1" height="10" style="display:block"/></td>
</tr>
</table>
<table width="680" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ebebeb">
<tr>
<td width="100%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="font-size: 12px; color: #a2a2a2; font-weight: normal; font-family: Helvetica, Arial, sans-serif; line-height: 26px; vertical-align: top; text-align:center; padding:20px 0 15px">
<table align="center">
<tr>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/facebook.png" width="35" height="35" alt="Facebook" title="Facebook" border="0" />
</a>
</td>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/twitter.png" width="35" height="35" alt="Twitter" title="Twitter" border="0" />
</a>
</td>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/google.png" width="35" height="35" alt="Google" title="Google" border="0" />
</a>
</td>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/rss.png" width="35" height="35" alt="RSS" title="RSS" border="0" />
</a>
</td>
<td>
<a style="text-decoration:none" href="https://www.example.com">
<img src="https://www.emailonacid.com/images/emails/stamplia1/mail.png" width="35" height="35" alt="Mail" title="Mail" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>