在简报中的多个 table 行显示图像
Display image on multiple table rows in a newsletter
有没有办法在时事通讯电子邮件的 table 的多行中插入倾斜图像？
早鸟优惠图片没有定位在行的角落。
我对图片进行切片并尝试无济于事，边距和位置都不起作用。
<table style="border-collapse:collapse;font-family: Arial;width:95%;max-width:600px;" bgcolor="e5f1e8" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"></td>
<td>
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img style="margin:0; padding:0; border:none; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/header_03.jpg" alt="">
</td>
</tr>
<tr>
<td style="background: #fff;" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<h1 style="font-family:Arial; margin:0; padding-top:9px; padding-left:24px; font-size:18px; font-weight:bold; color:#ee7600; line-height:24px;">How To Value And Exit <br>
Your Business For Maximum Profit</h1>
<h2 style="font-family:Arial; line-height:20px; margin:0; padding:8px 0 10px 24px; color:#2b2b2b; font-weight:bold; font-size:15px;">An Informational Workshop For The Smart
Business Owner</h2>
</td>
<td>
<img style="margin:-16px 88px 0 0;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early1.png">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" height="22">
<img style="margin:0 53px 0 0;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early2.png">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img style="margin:20px; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/img3.jpg" alt=""><span style="float:left;width:70%; padding-top:15px;padding-bottom:15px;">
<h1 style="font-family:Calibri; margin:0 0 10px 0; font-weight:bold; font-size:20px; color:#ee7600;">This event will demonstrate how to value a<br>
business and prepare a business for sale:</h1>
<ul style="padding:0 0 0 18px; margin:0; font-family:Calibri; font-size:15px; color:#1e1e1e;">
<li style="padding:3px 0">Business valuations that withstand buyers’ negotiation pressures</li>
<li style="padding:3px 0">What is needed for a valuation and what are key ratios to value a business</li>
<li style="padding:3px 0">The right professional packages to attract capable, legitimate buyers</li>
<li style="padding:3px 0">How to qualify investors and which ones to avoid</li>
<li style="padding:3px 0">How to obtain a solid offer with the best deal structure for yourself</li>
<li style="padding:3px 0">What to do with Uncle Sam and what to look for in a closing attorney</li>
</ul>
</span>
</td>
<td valign="top" align="right">
<img style="margin:0;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early3.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25"></td>
</tr>
</table>
不要成为坏消息的传递者，但就 HTML 电子邮件而言，您的电子邮件在大多数电子邮件客户端中效果不佳。电子邮件客户端有一种非常 'special' 的阅读方式 HTML 和 CSS。表格是主食，浮动和 div 作为容器大多已经过时了。边距和填充只能真正有效地用在 TD 标签上 - 有些客户甚至根本不会识别边距。
下面是一些链接，可帮助提供有关 'ins and outs' 电子邮件设计和开发的一些很好的参考和指南。
https://www.exacttarget.com/products/email-marketing/email-design-toolkit
https://litmus.com/blog/html-email-coding-101-infographic
http://templates.mailchimp.com/getting-started/html-email-basics/
http://www.sitepoint.com/how-to-code-html-email-newsletters/
CSS 不同浏览器之间的能力 - https://www.campaignmonitor.com/css/
我也针对您的问题创建了一个 'fix'，但请记住，电子邮件的其余部分在某些电子邮件客户端中可能会失败。我所做的是创建一个定义的长度 TD 来容纳最上面的切片图像，然后我确保该图像的 valign bottom 处于打开状态。在下一行，我在 TD 中创建了一个包含两列的新 table。在右边的TD上，我再次定义了一个宽度来放置它。在最后一个中，我定义了 TD 宽度并将 valign 设置为顶部。
顶部的一个主要问题也是行的大小。高度大于图像高度，这意味着它不会连接到顶部或底部，具体取决于 valign。我更改了示例中的字体大小和行高来解决这个问题。
<table style="border-collapse:collapse;font-family: Arial;width:95%;max-width:600px;" bgcolor="e5f1e8" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"></td>
<td>
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img style="margin:0; padding:0; border:none; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/header_03.jpg" alt="">
</td>
</tr>
<tr>
<td style="background: #fff;" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:8px 24px 10px;">
<div style="font-family:Arial; margin:0; font-size:16px; font-weight:bold; color:#ee7600; line-height:22px;">How To Value And Exit <br>
Your Business For Maximum Profit</div>
<div style="height:7px; font-size:7px; mso-line-height-rule:exactly; line-height:100%;"> </div>
<div style="font-family:Arial; line-height:18px; color:#2b2b2b; font-size:13px;">An Informational Workshop For The Smart
Business Owner</div>
</td>
<td width="239" valign="bottom" style="border-collapse:collapse;">
<img style="display:block; border:none;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early1.png">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td> </td>
<td align="left" width="144" height="22" style="border-collapse:collapse;">
<img style="display:block; border:none;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early2.png">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img style="margin:20px; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/img3.jpg" alt=""><span style="float:left;width:70%; padding-top:15px;padding-bottom:15px;">
<h1 style="font-family:Calibri; margin:0 0 10px 0; font-weight:bold; font-size:20px; color:#ee7600;">This event will demonstrate how to value a<br>
business and prepare a business for sale:</h1>
<ul style="padding:0 0 0 18px; margin:0; font-family:Calibri; font-size:15px; color:#1e1e1e;">
<li style="padding:3px 0">Business valuations that withstand buyers’ negotiation pressures</li>
<li style="padding:3px 0">What is needed for a valuation and what are key ratios to value a business</li>
<li style="padding:3px 0">The right professional packages to attract capable, legitimate buyers</li>
<li style="padding:3px 0">How to qualify investors and which ones to avoid</li>
<li style="padding:3px 0">How to obtain a solid offer with the best deal structure for yourself</li>
<li style="padding:3px 0">What to do with Uncle Sam and what to look for in a closing attorney</li>
</ul>
</span>
</td>
<td width="95" valign="top" align="right" style="border-collapse:collapse;">
<img style="display:block;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early3.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25"></td>
</tr>
</table>
有没有办法在时事通讯电子邮件的 table 的多行中插入倾斜图像？
早鸟优惠图片没有定位在行的角落。 我对图片进行切片并尝试无济于事，边距和位置都不起作用。
<table style="border-collapse:collapse;font-family: Arial;width:95%;max-width:600px;" bgcolor="e5f1e8" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"></td>
<td>
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img style="margin:0; padding:0; border:none; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/header_03.jpg" alt="">
</td>
</tr>
<tr>
<td style="background: #fff;" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<h1 style="font-family:Arial; margin:0; padding-top:9px; padding-left:24px; font-size:18px; font-weight:bold; color:#ee7600; line-height:24px;">How To Value And Exit <br>
Your Business For Maximum Profit</h1>
<h2 style="font-family:Arial; line-height:20px; margin:0; padding:8px 0 10px 24px; color:#2b2b2b; font-weight:bold; font-size:15px;">An Informational Workshop For The Smart
Business Owner</h2>
</td>
<td>
<img style="margin:-16px 88px 0 0;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early1.png">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" height="22">
<img style="margin:0 53px 0 0;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early2.png">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img style="margin:20px; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/img3.jpg" alt=""><span style="float:left;width:70%; padding-top:15px;padding-bottom:15px;">
<h1 style="font-family:Calibri; margin:0 0 10px 0; font-weight:bold; font-size:20px; color:#ee7600;">This event will demonstrate how to value a<br>
business and prepare a business for sale:</h1>
<ul style="padding:0 0 0 18px; margin:0; font-family:Calibri; font-size:15px; color:#1e1e1e;">
<li style="padding:3px 0">Business valuations that withstand buyers’ negotiation pressures</li>
<li style="padding:3px 0">What is needed for a valuation and what are key ratios to value a business</li>
<li style="padding:3px 0">The right professional packages to attract capable, legitimate buyers</li>
<li style="padding:3px 0">How to qualify investors and which ones to avoid</li>
<li style="padding:3px 0">How to obtain a solid offer with the best deal structure for yourself</li>
<li style="padding:3px 0">What to do with Uncle Sam and what to look for in a closing attorney</li>
</ul>
</span>
</td>
<td valign="top" align="right">
<img style="margin:0;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early3.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25"></td>
</tr>
</table>
不要成为坏消息的传递者，但就 HTML 电子邮件而言，您的电子邮件在大多数电子邮件客户端中效果不佳。电子邮件客户端有一种非常 'special' 的阅读方式 HTML 和 CSS。表格是主食，浮动和 div 作为容器大多已经过时了。边距和填充只能真正有效地用在 TD 标签上 - 有些客户甚至根本不会识别边距。
下面是一些链接，可帮助提供有关 'ins and outs' 电子邮件设计和开发的一些很好的参考和指南。
https://www.exacttarget.com/products/email-marketing/email-design-toolkit https://litmus.com/blog/html-email-coding-101-infographic http://templates.mailchimp.com/getting-started/html-email-basics/ http://www.sitepoint.com/how-to-code-html-email-newsletters/
CSS 不同浏览器之间的能力 - https://www.campaignmonitor.com/css/
我也针对您的问题创建了一个 'fix'，但请记住，电子邮件的其余部分在某些电子邮件客户端中可能会失败。我所做的是创建一个定义的长度 TD 来容纳最上面的切片图像，然后我确保该图像的 valign bottom 处于打开状态。在下一行，我在 TD 中创建了一个包含两列的新 table。在右边的TD上，我再次定义了一个宽度来放置它。在最后一个中，我定义了 TD 宽度并将 valign 设置为顶部。
顶部的一个主要问题也是行的大小。高度大于图像高度，这意味着它不会连接到顶部或底部，具体取决于 valign。我更改了示例中的字体大小和行高来解决这个问题。
<table style="border-collapse:collapse;font-family: Arial;width:95%;max-width:600px;" bgcolor="e5f1e8" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"></td>
<td>
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img style="margin:0; padding:0; border:none; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/header_03.jpg" alt="">
</td>
</tr>
<tr>
<td style="background: #fff;" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:8px 24px 10px;">
<div style="font-family:Arial; margin:0; font-size:16px; font-weight:bold; color:#ee7600; line-height:22px;">How To Value And Exit <br>
Your Business For Maximum Profit</div>
<div style="height:7px; font-size:7px; mso-line-height-rule:exactly; line-height:100%;"> </div>
<div style="font-family:Arial; line-height:18px; color:#2b2b2b; font-size:13px;">An Informational Workshop For The Smart
Business Owner</div>
</td>
<td width="239" valign="bottom" style="border-collapse:collapse;">
<img style="display:block; border:none;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early1.png">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td> </td>
<td align="left" width="144" height="22" style="border-collapse:collapse;">
<img style="display:block; border:none;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early2.png">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img style="margin:20px; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/img3.jpg" alt=""><span style="float:left;width:70%; padding-top:15px;padding-bottom:15px;">
<h1 style="font-family:Calibri; margin:0 0 10px 0; font-weight:bold; font-size:20px; color:#ee7600;">This event will demonstrate how to value a<br>
business and prepare a business for sale:</h1>
<ul style="padding:0 0 0 18px; margin:0; font-family:Calibri; font-size:15px; color:#1e1e1e;">
<li style="padding:3px 0">Business valuations that withstand buyers’ negotiation pressures</li>
<li style="padding:3px 0">What is needed for a valuation and what are key ratios to value a business</li>
<li style="padding:3px 0">The right professional packages to attract capable, legitimate buyers</li>
<li style="padding:3px 0">How to qualify investors and which ones to avoid</li>
<li style="padding:3px 0">How to obtain a solid offer with the best deal structure for yourself</li>
<li style="padding:3px 0">What to do with Uncle Sam and what to look for in a closing attorney</li>
</ul>
</span>
</td>
<td width="95" valign="top" align="right" style="border-collapse:collapse;">
<img style="display:block;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early3.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25"></td>
</tr>
</table>