HTML 电子邮件表格嵌套答案

【问题标题】：HTML email table nestingHTML 电子邮件表格嵌套
【发布时间】：2012-06-17 12:19:14
【问题描述】：

我正在编写一些 html 代码来制作 html 电子邮件。我做了一些研究，发现使用老式的 html，例如表格等是最好的方法。

我已经很久没有用过桌子了，但我的记忆力稍微恢复了一点，我觉得我做得很好。我将布局分成 4 个垂直行。页眉包装器、主包装器、calltoaction 和页脚。我把这些都放在了一个包装里。几乎一切正常，但我不明白为什么内容和图标 td 不对齐？正如我多次声明的那样，整个事物的最大宽度应该是 600px。我不希望它像现在这样用完。

由于某种原因，当我在浏览器中查看带有“检查元素”选项的页面时，它似乎在我告诉他们之前关闭了 td。我需要做什么才能让这两个 td 彼此对齐并使整个事物的最大宽度为 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>

因此，在您的帮助下，我开始着手处理其余的工作，并使布局在移动设备上易于阅读，这就是我现在所拥有的；

<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>

你可以在这里看到一个例子； http://kellyvuijst.nl/email/email.html（带有图像和所有）当将屏幕缩放到小于 400 像素时，我希望图标 td 在内容下移动，但我似乎无法管理。我认为显示块可以解决问题，但事实并非如此。此外，还有这个奇怪的黑色/灰色空间，我不知道为什么会在那里。当我添加表格时它出现了，所以它必须以某种方式发生冲突。我发现表格非常混乱和混乱，所以我希望有人能帮我清理一下。

【问题讨论】：

想要的结果是什么？此外，您在另一个 TR 中有一个 TR
那么，我不能在另一个 TR 中使用一个 TR？嗯，想要的效果，我该如何解释......它是一个电子邮件通讯，有一个标题，下面有一个图像，然后是一个内容块，分为两部分，一个包含图像，一个包含文本。在那两行下面应该是整个 600px。我做了 mreyeros 告诉我的事情，这对于两个相邻的 td 来说效果很好，但现在我不能让底部的两行全宽，当我添加图像或文本时它会分开。
如果您可以在 Paint 中快速绘制它的草图（只是不同块的位置和宽度），我将很乐意帮助您解决所有问题。很难准确理解您期望它的外观
这是草图，基本上； i48.tinypic.com/1zp2m89.png。十字架是图像，我希望你明白我的意思。我不认为我可以在这里放完整的 psd 设计，抱歉。
在这个 cmets 之后添加了一个新答案

标签： html email html-table

【解决方案1】：

（按照您在 cmets 中提供的 HTML 设计草图 - http://i48.tinypic.com/1zp2m89.png）

为了实现这一点，请将colspan="2" (colspan) 设置为更大的 TD 行。这将使它们跨越 2 列，并将第三行（内容和图标）保留为两列行。如果您以后不需要通过添加更多列来使设计复杂化，这将是一个很好的解决方案，因为使用 colspan 会非常混乱。如果在某些时候变得过于混乱，您还可以在另一个表中使用一个表来获得相同的结果，并提供一种微调设计的简单方法。

我已经使用您的代码设置了一个示例： http://jsfiddle.net/dvirazulay/TFweS/1/

【讨论】：

是的，这正是我想要实现的，非常感谢您的帮助。桌子很乱，难怪没人再用了；）
我遇到了另一个关于这个布局的问题，我在页面顶部描述了它，希望你能再次帮助我。
@Kelly：我很乐意尝试，但您应该创建一个新问题，其中包含与新问题相关的所有内容（代码、链接、解释）。这样，您将获得更多关注，并为其他更关心您的第二个问题的人提供未来的参考。然后，只需在此处粘贴指向新问题的链接
哦，对不起，谢谢你的提示！我在这里创建了一个新问题； stackoverflow.com/questions/11048594/…

【解决方案2】：

您在标题和设备行中的 td 中缺少 colspan 属性：

            <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>

【讨论】：

很高兴能帮上忙