电子邮件 HTML Blast - 图片未排成一行的表格?
Posted
技术标签:
【中文标题】电子邮件 HTML Blast - 图片未排成一行的表格?【英文标题】:Email HTML Blast - table with images not lining up in row? 【发布时间】:2018-12-27 22:53:21 【问题描述】:这是我的sn-p代码:
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" class="email-container">
<tr>
<td><a href="https://www.facebook.com/classicstagecompany"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Facebook.jpg" style="display:block"/></a></td>
<td><a href="https://twitter.com/classicstage"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Twitter.jpg" style="display:block"/></a></td>
<td><a href="https://www.instagram.com/classicstage/"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Insta.jpg" style="display:block"/></a></td>
</tr>
<tr>
<td><a href="http://www.classicstage.org"><img src="http://classicstage.org/wp-content/uploads/2018/07/footer.jpg" style="display:block"/></a>
</td>
</tr>
</table>
为什么在 Dreamweaver 中看起来像这样:
但在 Gmail 中是这样的:
【问题讨论】:
【参考方案1】:在一个表中,每个表都应该有相同的行数,或者 colspan 可用于跨多个列跨越一个表。不建议使用 colspan,因为不同的电子邮件客户端开始出现问题。
表格列内的表格
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" class="email-container">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" class="email-container">
<tr>
<td><a href="https://www.facebook.com/classicstagecompany"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Facebook.jpg" style="display:block"/></a></td>
<td><a href="https://twitter.com/classicstage"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Twitter.jpg" style="display:block"/></a></td>
<td><a href="https://www.instagram.com/classicstage/"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Insta.jpg" style="display:block"/></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><a href="http://www.classicstage.org"><img src="http://classicstage.org/wp-content/uploads/2018/07/footer.jpg" style="display:block"/></a>
</td>
</tr>
</table>
colspan 方法(让您了解它的工作原理)
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" class="email-container">
<tr>
<td><a href="https://www.facebook.com/classicstagecompany"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Facebook.jpg" style="display:block"/></a></td>
<td><a href="https://twitter.com/classicstage"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Twitter.jpg" style="display:block"/></a></td>
<td><a href="https://www.instagram.com/classicstage/"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Insta.jpg" style="display:block"/></a></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.classicstage.org"><img src="http://classicstage.org/wp-content/uploads/2018/07/footer.jpg" style="display:block"/></a>
</td>
</tr>
</table>
尝试第一个(它会起作用)。
干杯
【讨论】:
以上是关于电子邮件 HTML Blast - 图片未排成一行的表格?的主要内容,如果未能解决你的问题,请参考以下文章