嵌套表格的HTML电子邮件 [英] HTML email with tables nesting
问题描述
我正在写一些HTML代码来制作一个html电子邮件。
我已经做了一些调查，发现使用旧学校html，比如表格等是最好的方式。
毕竟你的帮助以前的问题（谢谢！）我开始研究其余的问题，并使得布局易于在移动设备上阅读，这是我现在的; Mocht ugeïnteresseerdzijn in onze service，< HTML>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< meta name =viewportcontent =initial-scale = 1.0>
< meta name =format-detectioncontent =telephone = yes>
< style>
body {margin：0;填充：0;宽度：100％！重要;溢出-Y：滚动; background-image：url（background.png）; background-repeat：repeat-x; background-color：#dbdadb; -webkit-文字大小调整：100％; -ms-text-size-adjust：100％;}
p {margin：0 0 10px 26px;行高：1.2;宽度：320像素; font-size：0.9em;}
.contact {margin-left：5px;边距：15像素;宽度：170像素;字体大小：0.9em; text-align：center;}
h1 {margin：0 0 10px 26px;行高：1.2;宽度：320像素;字体大小：1.1em; font-weight：normal;}
img {outline：none;文字修饰：无; -ms-interpolation-mode：bicubic; display：block;}
a img {border：none;}
.headerwrapper {width：600px; background-color：＃000000;保证金：0像素; padding：0px;}
.header {text-align：center;}
.wrapper {width：600px; background-color：#dbdadb; align：center;}
.fixedwidth {width：600px！important;}
.content {width：340px;}
.icons {width：260px;}
.devices {宽度：600px的; height：310px;}
.miniwrapper {width：600px;}
.footer {background-image：url（http://i49.tinypic.com/54f2ac.png）;文本对齐：中心;行高：1.2;宽度：320像素; font-size：0.9em;}
.footermobile {display：none;}
.actiemobile {display：none;}
.iconwrapper {margin：0;行高：1.2; font-size：0.9em;}
.iconwrapper p {margin-left：0px; margin-bottom：10px;}
.headermobile {display：none;}
.devicesmobile {display：none;}
@media all和（max-width：400px） {
body {margin：0;填充：0;宽度：100％！重要;溢出-Y：滚动; background-image：url（background.png）; background-repeat：repeat-x; background-color：#dbdadb;}
p {margin：0 0 10px 26px;行高：1.2;宽度：350像素; font-size：0.9em;}
.contactmobile {margin-left：50％;边距：15像素;宽度：170像素;字体大小：1.1em;文本对齐：中心; line-height：1.2em;}
h1 {margin：0 0 10px 26px;行高：1.2;宽度：320像素;字体大小：1.1em; font-weight：normal;}
.headerwrapper {width：320px; background-color：＃000000;保证金：0像素; padding：0px;}
.header {display：none;}
.wrapper {width：100％; background-color：#dbdadb; align：center;}
.fixedwidth {width：100％！important;}
.content {width：320px; display：block;}
.icons {width：260px; display：block;}
.devices {display：none;}
.miniwrapper {width：100％;}
.footer {display：none;}
.actie {display ：none;}
.footermobile {display：block; background-image：url（footermobile.png）;文本对齐：中心;行高：1.2;宽度：320像素;高度：164px; font-size：0.9em;}
.actiemobile {display：block;}
.headermobile {display：block; text-align：center;}
.devicesmobile {display：block;}
}
/ *客户定制样式* /
#outlook a {padding： 0;} / *强制Outlook提供在浏览器中查看菜单链接。 * /
.ExternalClass {width：100％;} / *强制Hotmail以全宽显示电子邮件* /
.ExternalClass，.ExternalClass p，.ExternalClass span，.ExternalClass字体，.ExternalClass td， .ExternalClass div {line-height：100％;} / *强制Hotmail显示正常行间距。 * /
#backgroundTable {margin：0;填充：0;宽度：100％！重要; line-height：100％！important;}
/ *结束重置* /
< / style>
< title>电子邮件模板< / title>
< / head>
< body>
< table class =wrapperwidth =100％align =centerborder =0cellpadding =0cellspacing =0margin =0>
< tbody class =headerwrapper>
< tr class =header>
< td class =fixedwidthcolspan =2>
< img src =logo.pngborder =0>
< / td>
< / tr>
< tr class =devicesstyle =width：600px; height：300px;>
< td colspan =2>
< img src =devices.png>
< / td>
< / tr>
< tr class =headermobile>
< td class =fixedwidthcolspan =2>
< img src =logomobile.pngborder =0>
< / td>
< / tr>
< tr class =devicesmobile>
< td colspan =2>
< img src =devicesmobile.png>
< / td>
< / tr>
< / tbody>
< tr class =miniwrapper>
< tr class =fixedwidth>
< td class =contentalign =left>
< h1>您是否遇到了应用？< / h1>
< p> Het ontwikkelen van applicaties，oftewel apps，is namelijk boming！更好地了解我们的产品和服务。我们希望我们的产品能够满足您的需求。我们希望我们的产品能够满足您的需求，我们希望我们的产品能够满足您的需求。在gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven。中的Ook de enorme groei。< / p>
van op op maat gemaakte applicaties en en backend oplossingen，neem dan gerust contact met ons op。
U be bent van harte welkom voor een kop koffie bij ons in de mediaBunker，tijdens een verkennend gesprek of een demonstratie van de
mogelijkheden van mediaBunker als bedrijf。< / p>
< p> Alvast bedankt en hopelijk tot ziens。< / p>
< / p>
< / td>
< td class =图标>
< table>
< tr>
< td colspan =2>
无论使用哪种设备。< br>
我们以本地方式建立。
< / td>
< / tr>
< tr>
< tbody class =iconwrapper>
< tr text-align =center>
< td>< img src =apple.png>< / td>
< td>< p> Apple iOS是经营< br>
系统支持< br>
iPhone，iPad和iPod touch。< / p>
< / td>
< / tr>
< tr>
< td>< img src =android.png>< / td>
< td>< p>与Google等合作伙伴一起，< br>
HTC和摩托罗拉，Android是< br>
成为增长最快的移动操作系统。< / p>
< / td>
< / tr>
< tr>
< td>< img src =windows.png>< / td>
< td>< p>微软和诺基亚< br>
支持常规用户< br>
与Windows Phone。< / p>
< / td>
< / tr>
< tr>
< td>< img src =html5.png>< / td>
< td>< p>寻找其他平台< br>
像黑莓，三星< br>
Bada或HTML5& CSS3< BR>
我们可以建立它！< / p>
< / td>
< / tr>
< / tbody>
< / tr>
< / table>
< / td>
< / tr>
< / tr>
< tr>
< td class =actiecolspan =2>
< img src =http://i47.tinypic.com/11qi7pw.png>
< / td>
< td class =actiemobilecolspan =2>
< img src =actiemobile.png>
< / td>
< / tr>
< tr>
< td class =footercolspan =2>
< table>
< tr cellspace =0>
< td width =200pxtext-align =center>< p class =contact> Suikersilo-West 23< br> 1165 MP Halfweg< / p>< / td>
< td width =200pxtext-align =center>< p class =contact>< a href =tel：0031238200140> Tel +31 23 820 0140< / A><峰; br> < a href =mailto：info@mediabunker.com> info@mediabunker.com< / a>< / p>< / td>
< td width =200pxtext-align =center>< p class =contact>< a href =http://mediabunker.com> www.mediabunker .COM< / A><峰; br> < a href =http://twitter.com/mediabunker> twitter.com/mediabunker< / a>< / p>< / td>
< / tr>
< / table>
< / td>
< td class =footermobilecolspan =2>
< table>
< tr cellspace =0>
< td width =200pxtext-align =center>
< p class =contactmobile>
Suikersilo-West 23< br>
1165 MP Halfweg< br>
< a href =tel：0031238200140>电话+31 23 820 0140< / a>< br>
< a href =mailto：info@mediabunker.com> info@mediabunker.com< / a>< br>
< a href =http://mediabunker.com> www.mediabunker.com< / a>< br>
< a href =http://twitter.com/mediabunker> twitter.com/mediabunker< / a>< br>
< / p>
< / td>
< / tr>
< / table>
< / td>
< / tr>
< / table>
< / body>
< / html>
我有一些麻烦，使得布局在移动设备上也能很好地工作。我想我想出了一个更好的解决方案，但使用背景图像并将其他图像（设备，横幅等）放在上面。这可能会解决这个问题，对吗？
我还有两个其他问题;在移动设备上查看网页时，我无法获取图标td。我认为显示模块可以做到这一点，但它不会......另外，当我添加图标表时出现了这个奇怪的空间，它必须以某种方式冲突，我该如何解决这个问题？
如果有任何帮助，这是我以前的问题; HTML电子邮件表格嵌套
这是在线版本; http://kellyvuijst.nl/email/email.html
td 是对齐的 padding 或 margin 就很难左（当视口宽度小于400像素时），而你的其他内容（ h1 ， p ）有26px margin-right 。 您可以通过将26px的 padding-left 应用于.icons来解决此问题。这会使 .icons 的左边缘与上面的内容保持一致。
BUG ＃2，ATTEMPT 2：
查看您在评论中提供的演示链接后，我可以看到您描述的问题及其原因：您的内容是宽度超过其包含的元素。
您已为320px的所有段落设置了明确的宽度，这使得 .iconwrapper 比它应该的宽。我不认为你需要设置段落宽度，所以只需删除该CSS声明。
（我在调试这些布局问题时的建议是使用开发人员使用chrome中的工具来检查你的HTML元素，看看CSS样式是如何被应用的，我发现它真的帮助我可视化我的代码，看看它是如何影响布局的。）
I'm writing some html code to make an html email. I've done some research and I found that using old school html, such as tables etc is the best way to do this.
After all your help with previous problems (thank you!) I started working on the rest and making the layout easy to read on mobile devices, this is what I have now;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="format-detection" content="telephone=yes">
<style>
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
p { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:0.9em;}
.contact {margin-left:5px; margin-top:15px; width:170px; font-size:0.9em; text-align:center;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;}
a img {border:none;}
.headerwrapper {width:600px; background-color: #000000; margin:0px; padding:0px;}
.header {text-align:center;}
.wrapper {width:600px; background-color: #dbdadb; align:center;}
.fixedwidth {width:600px !important;}
.content {width:340px;}
.icons {width:260px;}
.devices {width:600px; height:310px;}
.miniwrapper {width:600px;}
.footer { background-image: url(http://i49.tinypic.com/54f2ac.png); text-align:center; line-height:1.2; width:320px; font-size:0.9em;}
.footermobile {display:none;}
.actiemobile {display:none;}
.iconwrapper {margin:0; line-height:1.2; font-size:0.9em;}
.iconwrapper p {margin-left: 0px; margin-bottom:10px;}
.headermobile {display:none;}
.devicesmobile {display:none;}
@media all and (max-width: 400px) {
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb;}
p { margin:0 0 10px 26px; line-height:1.2; width:350px; font-size:0.9em;}
.contactmobile {margin-left:50%; margin-top:15px; width:170px; font-size:1.1em; text-align:center; line-height:1.2em;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
.headerwrapper {width:320px; background-color: #000000; margin:0px; padding:0px;}
.header {display:none;}
.wrapper {width:100%; background-color: #dbdadb; align:center;}
.fixedwidth {width:100% !important;}
.content {width:320px; display:block;}
.icons {width:260px; display:block;}
.devices {display:none;}
.miniwrapper {width:100%;}
.footer {display:none;}
.actie {display:none;}
.footermobile {display:block; background-image: url(footermobile.png); text-align:center; line-height:1.2; width:320px; height:164px; font-size:0.9em;}
.actiemobile {display:block;}
.headermobile {display:block; text-align:center;}
.devicesmobile {display:block;}
}
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
/* End reset */
</style>
<title>email template</title>
</head>
<body>
<table class="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" margin="0">
<tbody class="headerwrapper">
<tr class="header">
<td class="fixedwidth" colspan="2">
<img src="logo.png" border="0">
</td>
</tr>
<tr class="devices" style="width:600px; height:300px;">
<td colspan="2">
<img src="devices.png">
</td>
</tr>
<tr class="headermobile">
<td class="fixedwidth" colspan="2">
<img src="logomobile.png" border="0">
</td>
</tr>
<tr class="devicesmobile">
<td colspan="2">
<img src="devicesmobile.png">
</td>
</tr>
</tbody>
<tr class="miniwrapper">
<tr class="fixedwidth">
<td class="content" align="left">
<h1>Werkt u al met apps?</h1>
<p>Het ontwikkelen van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en
bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>
<p>Mocht u geïnteresseerd zijn in onze service,
van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op.
U bent van harte welkom voor een kop koffie bij ons in de mediaBunker, tijdens een verkennend gesprek of een demonstratie van de
mogelijkheden van mediaBunker als bedrijf.</p>
<p>Alvast bedankt en hopelijk tot ziens.</p>
</p>
</td>
<td class="icons">
<table>
<tr>
<td colspan="2">
No matter what device.<br>
We build natively.
</td>
</tr>
<tr>
<tbody class="iconwrapper">
<tr text-align="center">
<td><img src="apple.png"></td>
<td><p>Apple iOS is the operating<br>
system that powers the <br>
iPhone, iPad and iPod touch.</p>
</td>
</tr>
<tr>
<td><img src="android.png"></td>
<td><p>With partners like Google,<br>
HTC and Motorola, Android is <br>
the fastest growing mobile OS.</p>
</td>
</tr>
<tr>
<td><img src="windows.png"></td>
<td><p>Together Microsoft and Nokia<br>
support conventional users <br>
with Windows Phone.</p>
</td>
</tr>
<tr>
<td><img src="html5.png"></td>
<td><p>Looking for other platforms<br>
like BlackBerry, Samsung <br>
Bada or HTML5 & CSS3?<br>
We can build it!</p>
</td>
</tr>
</tbody>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td class="actie" colspan="2">
<img src="http://i47.tinypic.com/11qi7pw.png">
</td>
<td class="actiemobile" colspan="2">
<img src="actiemobile.png">
</td>
</tr>
<tr>
<td class="footer" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center"><p class="contact">Suikersilo-West 23 <br> 1165 MP Halfweg</p></td>
<td width="200px" text-align="center"><p class="contact"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:info@mediabunker.com">info@mediabunker.com</a></p></td>
<td width="200px" text-align="center"><p class="contact"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></p></td>
</tr>
</table>
</td>
<td class="footermobile" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center">
<p class="contactmobile">
Suikersilo-West 23<br>
1165 MP Halfweg<br>
<a href="tel:0031238200140">Tel +31 23 820 0140</a><br>
<a href="mailto:info@mediabunker.com">info@mediabunker.com</a><br>
<a href="http://mediabunker.com">www.mediabunker.com</a><br>
<a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a><br>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I'm having some troubles making the layout work well on mobile devices too. I think I came up with a better solution though, use background images and place the other images (the devices, the banner etc) on top of that. That will probably solve that issue, right?
I have two other issues though; I can't get the icons td to go under the content when the page is viewed on a mobile device. I thought display block would do the trick but it doesn't... Also, there is this weird space on the right that came up when I added the icons table, it must conflict in some way, how do I fix this?
If it's any help, this was my previous question; HTML email table nesting And this is the online version; http://kellyvuijst.nl/email/email.html
The .icons td is aligned hard left (when the viewport is less than 400px wide) because it has no padding or margin on it, whereas your other content (h1, p) has 26px margin-right.
You could address this by applying 26px of padding-left to .icons. This will make the left-hand edge of .icons align with the content above it.
BUG #2, ATTEMPT 2:
After reviewing the demo link you provided in your comment, I can see the problem you describe and its cause: your content is wider than its containing element.
You have set an explicit width for all paragraphs of 320px, which makes the .iconwrapper wider than it is supposed to be. I don't think you need to set a paragraph width, so just remove that CSS declaration.
(My suggestion when debugging these sort of layout issues is to use the developer tools in chrome to inspect your HTML elements and look how CSS styles are being applied. I find it really helps me to visualise my code, and see how it affects the layout.)
这篇关于嵌套表格的HTML电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
