我正在编写一些 html 代码来制作 html 电子邮件。我做了一些研究，发现使用老式 html，例如表格等是最好的方法。
在您对以前的问题提供了所有帮助之后（谢谢！）我开始研究其余部分并使布局在移动设备上易于阅读，这就是我现在所拥有的；
<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>
我在使布局在移动设备上也能正常工作时遇到了一些麻烦。我想我想出了一个更好的解决方案，使用背景图像并将其他图像（设备、横幅等）放在上面。这可能会解决这个问题，对吧？
我还有另外两个问题；在移动设备上查看页面时，我无法让图标 td 进入内容下方。我认为显示块可以解决问题，但它没有......另外，当我添加图标表时，右边出现了这个奇怪的空间，它一定会以某种方式发生冲突，我该如何解决这个问题？
如果有帮助，这是我之前的问题；HTML 电子邮件表格嵌套 这是在线版本；http://kellyvuijst.nl/email/email.html