Question

我正在编写一些HTML代码来制作HTML电子邮件。我已经做了一些研究，我发现使用旧的学校html，比如表格等是最好的方法。

我已经很久没有使用过桌子了，但是我的记忆力有点恢复了，我觉得我做得很好。我将布局划分为4个垂直行。头文件包装器，主包装器，calltoaction和页脚。我已将这些全部放在包装中。几乎一切都有效，但我不明白为什么内容和图标不一致？整个事物的最大宽度应该是600px，因为我多次声明。我不希望它像现在一样耗尽。

出于某种原因，在我告诉他们之前，当我在浏览器中查看带有'inspect element'选项的页面时，它似乎关闭了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（带图像和所有）当将屏幕缩放到小于400px时，我希望图标td在内容下移动，但我似乎无法管理它。我认为显示块可以做到这一点，但事实并非如此。此外，有这个奇怪的黑色/灰色空间，我不知道为什么它在那里。当我添加表格时它出现了，所以它必须以某种方式发生冲突。我发现桌子非常混乱和混乱，所以我希望有人可以为我清理。

Answer 1

您在标头和设备行中的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>

Answer 2

（根据您在评论中提供的HTML设计草图 - http://i48.tinypic.com/1zp2m89.png）

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

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

HTML电子邮件表嵌套

2 个答案: