CODEWITHSUNDEEP
htmlemailhtml-table
Jane
Jane

Reputation: 816

HTML email table nesting

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:[email protected]">[email protected]</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:[email protected]">[email protected]</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.

Upvotes: 1

Views: 1944

Answers (2)

dvir
dvir

Reputation: 5115

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

Upvotes: 1

mreyeros
mreyeros

Reputation: 4379

You were missing a colspan attribute in the td that is in your header and devices rows:

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

Upvotes: 1

Related Questions