HTML电子邮件表嵌套 [英] HTML email table nesting
本文介绍了HTML电子邮件表嵌套的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我做了一些研究，我发现使用旧的学校html，如表等是最好的方法。
我没有使用年龄的表，但我刷新了我的记忆，我以为我做得很好。我将我的布局分为4行。标题包装，主包装，调用和页脚。我把这些都放在一个包装上。几乎所有的工作，但我不明白为什么内容和图标td不对齐在一起？整个事情的最大宽度应该是600px，因为我多次声明。我不希望它像现在一样耗尽。
由于某种原因，在我告诉他们之前，似乎关闭了td，当我看到我的浏览器中的'inspect element'选项。我需要做些什么才能让这两个td的对齐方式相互排列，使整个事物的最大宽度为600px？
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< meta name =viewportcontent =initial-scale = 1.0>
< style>
body {margin：0;填充：0;宽度：100％！重要;溢出-Y：滚动; }
p {margin：0 0 10px 0;行高：1.4;明确：右; }
code {font-size：1.2em; }
.headerwrapper {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;}
< / style>
< title>电子邮件模板< / title>
< / head>
< body>
< table class =wrapperwidth =556align =centerborder =0cellpadding =0cellspacing =0>
< tbody class =headerwrapper>
< tr class =header>
< td class =fixedwidth>
< img src =http://i49.tinypic.com/347i55g.pngborder =0>
< / td>
< / tr>
< tr class =devicesstyle =width：600px; height：300px;>
< td>
< img src =http://i47.tinypic.com/nujr9.png>
< / td>
< / tr>
< / tbody>
< tr class =miniwrapper>
< tr class =fixedwidth>
< td class =contentalign =left>
tekst
< / td>
< td class =iconsalign =left>
tekst
< / td>
< / tr>
< / tr>
< tr>
< td>
calltoaction
< / td>
< / tr>
< tr>
< td>
footer
< / td>
< / tr>
< / table>
< / body>
< / html>
所有的帮助我完成了其余的工作，使布局在移动设备上轻松阅读，这是我现在所在的
< 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插值模式：双三次; display：block;}
a img {border：none;}
.headerwrapper {width：600px;背景颜色：＃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;宽度：320像素; 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：600px;背景颜色：＃000000;保证金：0像素; padding：0px;}
.header {display：none;}
.wrapper {width：100％; background-color：#dbdadb; align：center;}
.fixedwidth {width：100％！important;}
.content {width：340px; display：block;}
.icons {width：260px;显示：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 font，.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 =600align =centerborder =0cellpadding =0cellspacing =0margin =0
< tbody class =headerwrapper>
< tr class =header>
< td class =fixedwidthcolspan =2>
< img src =http://i49.tinypic.com/347i55g.pngborder =0>
< / td>
< / tr>
< tr class =devicesstyle =width：600px; height：300px;>
< td colspan =2>
< img src =http://i47.tinypic.com/nujr9.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> Werkt u al met apps？< / h1>
< p> Het ontwikkelen van应用程序，宝石应用程序，是namelijk蓬勃发展！ Steeds meer merken en
bedrijven zien het gemak van een app。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 hugee groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven。< / p>
< p> Mocht ugeïnteresseerdzijn in onze服务，
van op maat gemaakte应用程序后端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 showsatie 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>
无论什么设备。< 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>一起Microsoft和Nokia< 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 cellpace =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>电话+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 cellpace =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>
你可以看到一个现在在这里的例子; http://kellyvuijst.nl/email/email.html （附图像和全部）当将屏幕缩放到小于400px我希望图标td在内容下移动，但我似乎无法管理。我认为显示屏会做的伎俩，但它没有。此外，还有这个奇怪的黑色/灰色空间，我不知道为什么它在那里。当我添加表格时，它必须以某种方式发生冲突。我发现表格非常混乱，令人困惑，所以希望有人可以为我解决问题。
解决方案
（按照HTML设计素描在评论中提供 - http://i48.tinypic.com/1zp2m89.png ）
为了实现这一点，设置 colspan =2（ colspan ）到更大的行TD。这将使它们跨越2列，并将您的第三个（内容和图标）行作为两列行。这将是一个很好的解决方案，如果你不需要通过添加更多的列复杂化设计，因为这将是相当混乱玩colspans。
如果在某种程度上变得太凌乱，您还可以使用另一个表格中的表来实现相同的结果，并提供一种简单的方法来调整设计。
我已经使用你的代码设置了一个例子：
http：// jsfiddle.net/dvirazulay/TFweS/1/
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.
I haven't used tables in ages but I refreshed my memory a bit and I thought I was doing pretty well. I divided my layout into 4 vertical rows. Header wrapper, main wrapper, calltoaction and the footer. I've placed these all in a wrapper. Almost everything works but I don't get why the content and icons td don't align together? The max width of the whole thing should be 600px, as I declared multiple times. I don't want it to run out like it does now.
For some reason it seems to close td's before I tell them to, when I view the page with the 'inspect element' option in my browser. What do I need to do to get those two td's aligning next to each other and make the max width of the whole thing 600px?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; }
p { margin:0 0 10px 0; line-height:1.4; clear:right; }
code { font-size:1.2em; }
.headerwrapper { 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;}
</style>
<title>email template</title>
</head>
<body>
<table class="wrapper" width="556" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody class="headerwrapper">
<tr class="header">
<td class="fixedwidth">
<img src="http://i49.tinypic.com/347i55g.png" border="0">
</td>
</tr>
<tr class="devices" style="width:600px; height:300px;">
<td>
<img src="http://i47.tinypic.com/nujr9.png">
</td>
</tr>
</tbody>
<tr class="miniwrapper">
<tr class="fixedwidth">
<td class="content" align="left">
tekst
</td>
<td class="icons"align="left">
tekst
</td>
</tr>
</tr>
<tr>
<td>
calltoaction
</td>
</tr>
<tr>
<td>
footer
</td>
</tr>
</table>
</body>
</html>
So after all your help 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:320px; 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:600px; background-color: #000000; margin:0px; padding:0px;}
.header {display:none;}
.wrapper {width:100%; background-color: #dbdadb; align:center;}
.fixedwidth {width:100% !important;}
.content {width:340px; 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="600" align="center" border="0" cellpadding="0" cellspacing="0" margin="0">
<tbody class="headerwrapper">
<tr class="header">
<td class="fixedwidth" colspan="2">
<img src="http://i49.tinypic.com/347i55g.png" border="0">
</td>
</tr>
<tr class="devices" style="width:600px; height:300px;">
<td colspan="2">
<img src="http://i47.tinypic.com/nujr9.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>
And you can see an example of what it is now here; http://kellyvuijst.nl/email/email.html (with the images and all) When scaling the screen to less than 400px I want the icons td to move under the content but I can't seem to manage that. I thought display block would do the trick but it doesn't. Also, there is this weird black/gray space, I don't know why it's there. It came up when I added the table so it must conflict in some way. I find tables very messy and confusing so I hope someone can clear things up for me.
解决方案
(Following the HTML design sketch you provided in the comments - http://i48.tinypic.com/1zp2m89.png)
In order to achieve that, set colspan="2" (colspan) to the larger rows TDs. This will make them span across 2 columns, and leave your third (content and icons) row as a two columns row. This will be a good solution if you don't need to complicate the design later on by adding more columns, as it will be quite messy playing with colspans.
If at some point it becomes too messy, you could also use a table inside another table to achieve the same results and provide an easy way to fine tune the design.
I've set up an example of it using your code: http://jsfiddle.net/dvirazulay/TFweS/1/
这篇关于HTML电子邮件表嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http://i48.tinypic.com/1zp2m89.png](\"http://i48.tinypic.com/1zp2m89.png\"){kind=link}
