Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Linards Berzins
Courses Plus Student 13,480 PointsHTML Email footer outside the main template
Hi, Im trying to figure out how to display the footer inside the blue email area. It all seems fine untill the moment I put some <table> tag inside the scafolding <tr> <td> tags. Im creating the template following Fabio Carneiro videos. Im adding the image and the code.
<center>
<table style="background-color:#654321;" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell" style="padding: 1em 0 1em 0;">
<!-- // BEGIN EMAIL -->
<table style="background-color:#123456;border-radius: 9px;" border="0" cellpadding="0" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="left" valign="top" id="logoContainer" style="padding: 1em 1em 0 1em;">
<table border="0" cellspacing="0" >
<img src="img/logo.png" alt="Logo" height="165" width="150" id="logoImage" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" id="logo">
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="navContainer">
<table cellspacng="0" cellpadding="0" width="600" style="background-color: red; height:50px; padding-left: 9.5em; border-bottom: 2px solid black;">
<tr>
<td style="width: 2em;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none; padding-left: 1em;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 9px 13px;border-radius: 6px;text-align: center;text-decoration: none;border: 1px solid white;">Products</a>
</td>
<td style="width: 2em;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;padding-left: 1em;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 9px 13px;border-radius: 6px;text-align: center;text-decoration: none;border: 1px solid white;">Marketing</a>
</td>
<td style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none; padding-right:5.7em;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 9px 13px;border-radius: 6px;text-align: center;text-decoration: none;border: 1px solid white;">Contact Us</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="introContainer">
<table cellspacng="0" cellpadding="0" style="background-color: yellow; width:600px; height:20px; padding: 0 1em 0 1em;">
<tr>
<td>
<h3>Intro</h3>
</td>
</tr>
<tr>
<td style="width:6em;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type spe
</td>
<td style="width:2em;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ince the 1500s
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="messageContainer">
<table cellspacng="0" cellpadding="0" style="background-color: pink; width:15em; margin-top:1em;">
<tr>
<td>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="imagesContainer">
<table width="560" id="images" cellpadding="0" cellspacing="0">
<table style="padding-left:3em;"align="left" width="180">
<td>
<tr>
<td align="left">
<img src="img/images.jpg" alt="image" id="logoImage" width="180" height="110" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;">
</td>
</tr>
<tr>
<td valign="top" style="color:#505050;font-family:Helvetica;font-size:11px;line-height:150%;padding-top:10px;padding-right:0;padding-bottom:20px;padding-left:0;text-align:left;border-collapse:collapse!important">
survived not only five centuries, but also the leap into electronic typesetting
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0; background-color:#123456;font-size: 15px; font-weight: bold; text-transform:uppercase;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;border:2px solid;border-radius:5px;">Purchase</a>
</td>
</tr>
</td>
</table>
<table style="padding-right:3em;"align="right" width="180">
<td>
<tr>
<td align="left">
<img src="img/images.jpg" alt="image" id="logoImage" width="180" height="110" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;">
</td>
</tr>
<tr>
<td valign="top" style="color:#505050;font-family:Helvetica;font-size:11px;line-height:150%;padding-top:10px;padding-right:0;padding-bottom:20px;padding-left:0;text-align:left;border-collapse:collapse!important">
survived not only five centuries, but also the leap into electronic typesetting but also the leap into electronic typesetting ed not only five centuries, but also the leap into electronic typesetting but also the leap into electronic typesettin
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0; background-color:#123456;font-size: 15px; font-weight: bold; text-transform:uppercase;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;border:2px solid;border-radius:5px;">Purchase</a>
</td>
</tr>
</td>
</table>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="footerContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding: 40px;">
<!-- // BEGIN FOOTER BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="footerBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" class="footerContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #AAAAAA;font-size: 13px;line-height: 150%;padding-bottom: 40px;">
<strong>As always, everyone at square gallery thanks you
<br>
for your support. We couldn’t exist without you.</strong>
</td>
</tr>
<tr>
<td align="center" valign="top" class="footerContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #AAAAAA;font-size: 13px;line-height: 150%;padding-bottom: 40px;">
© 2013 square gallery. • 1551 Peachtree Street NW • Atlanta, Georgia 30318
<br>
<br>
<a href="#" target="_blank" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #D83826;text-decoration: none;">unsubscribe from list</a> <a href="#" target="_blank" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #D83826;text-decoration: none;">set email preferences</a> <a href="#" target="_blank" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #D83826;text-decoration: none;">view in browser</a>
</td>
</tr>
</table>
<!-- END FOOTER BLOCK // -->
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
</center>
</body>```
many thanks
link to the image [image here](http://i.imgur.com/opYCs0T.png)
2 Answers
Johann Headley
Front End Web Development Techdegree Student 22,322 PointsMy bad. Completely missed that it was an email template you were referring to. Makes a bit more sense!!
Johann Headley
Front End Web Development Techdegree Student 22,322 PointsOk I think before addressing the placing issues, you should reconsider a few things. I noticed that you seem to be using tables in order to achieve a certain spacing and layout. This is an old way of doing this. A more effective way to accomplish this is to use the box method (see lesson on box method) or even the newer flex box. Tables should only be used to show actual tabular data.
Another thing is to keep the indentation for nested parts of your code orderly. Then you will be able to see where things are placed easily. Also try to get away from inline styling. Separate CSS will make the process easier too.
Once that is done it should be more apparent where to place your footer.
Linards Berzins
Courses Plus Student 13,480 PointsCheers Johann for your quick answer,
sorry if my title is misleading, but this is for the HTML email not the website. I see your point.
Thanks