时间戳

首页 > 解决方案 > 电子邮件 HTML Blast - 图像未排成一行的表格？

html - 电子邮件 HTML Blast - 图像未排成一行的表格？

问题描述

这是我的代码片段：

    <table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="580" 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" width="194" height="50" alt="Follow us on Facebook!" 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" width="194" height="50" alt="Follow us on Twittter!" 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" width="194" height="50" alt="Follow us on Instagram!" 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" width="580" height="175" alt="@ClassicStage #CSCCarmenJones, www.classicstage.com, 136 E 13th St New York NY 10003"  style="display:block"/></a>
            </td>   
        </tr>
    </table>

为什么在 Dreamweaver 中看起来像这样：

在此处输入图像描述

但是在 Gmail 中是这样的：

在此处输入图像描述

标签： htmlemailhtml-tablehtml-email

解决方案

在一个表中，每个表都应该有相同的行数，或者 colspan 可用于跨多个列跨越一个表。不建议使用 colspan，因为不同的电子邮件客户端开始出现问题。

表列内的表

<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="580" class="email-container">
        <tr>
            <td>
			
				<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="580" 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" width="194" height="50" alt="Follow us on Facebook!" 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" width="194" height="50" alt="Follow us on Twittter!" 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" width="194" height="50" alt="Follow us on Instagram!" 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" width="580" height="175" alt="@ClassicStage #CSCCarmenJones, www.classicstage.com, 136 E 13th St New York NY 10003"  style="display:block"/></a>
            </td>   
        </tr>
    </table>

colspan 方法（让您了解它是如何工作的）

<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="580" 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" width="194" height="50" alt="Follow us on Facebook!" 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" width="194" height="50" alt="Follow us on Twittter!" 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" width="194" height="50" alt="Follow us on Instagram!" 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" width="580" height="175" alt="@ClassicStage #CSCCarmenJones, www.classicstage.com, 136 E 13th St New York NY 10003"  style="display:block"/></a>
            </td>   
        </tr>
    </table>

尝试第一个（它会工作）。

干杯

推荐阅读