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
rachelweaver
15,876 PointsHTML Email help, what am I doing wrong?
I am attempting to make an email template using the HTML email course. My problem is my "talent blocks" are not lining up evenly and my "header block" will not align center. I have re-read my code, checked for missing tags, looked at mailchimps api and documentation and nothing seems to be wrong. Is there something I am missing?
Here is my code:
\ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>QueryFest | Invitation</title> <style type="text/css"> </style> </head> <body> <center> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable"> <tr> <td align="center" valign="top" id="bodyCell">
<!-- // BEGIN EMAIL -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="emailContainer">
<tr>
<td align="center" valign="top" id="heroImageContainer">
<!-- //BEGIN HERO BLOCK -->
<img src="https://dl.dropboxusercontent.com/s/k7h3q6csl4rftk8/musicfestivalwalpaper3byevophoto.jpg?dl=0" alt="eVo photo" height="415" width="520" id="heroImage"/>
<!-- //END HERO BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="introContainer">
<!-- //BEGIN INTRO BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="520" id="introductionBlock">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="introductionHeading">
<h1>Come Join Us</h1>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="introductionContent">
We invite you to join us from<strong> September 4th-7th</strong> for our inaugural music festival. In an event featuring the most popular talent on our app and streaming service, 15 bands will take to 2 stages for 3 days of non-stop music.
</td>
</tr>
</table>
<!-- //END INTRO BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="featuredTalentContainer">
<!-- BEGIN TALENT BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="talentBlock">
<tr>
<td align="left" valign="top" id="talentBlockCell">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="talentBlockHeading">
<h2>Featured Talent</h2>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="33%" class="talentBlockLeftColumn">
<!--//BEGIN TALENT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<img src="https://dl.dropboxusercontent.com/s/joo29fpz1irvu3f/Cascaduerbydidyb.jpg?dl=0" height="110" width="150" alt="cascaduerdidyb" class="talentImage"/>
<br/>
<strong>Cascaduer</strong>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="talentButton">
<tr>
<td align="center" valign="bottom" class="talentButtonContent">
<a href="#" target="_blank" title="">STREAM</a>
</td>
</tr>
</table>
</tr>
</table>
<!--//END TALENT -->
</td>
<td align ="center" valign="top" width="33%" class="talentBlockCenterColumn">
<!--//BEGIN TALENT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<img src="https://dl.dropboxusercontent.com/s/d11fia0l7m5ze4d/capnjazzbyincase.jpg?dl=0" height="110" width="150" alt="capnjazzbyincase" class="talentImage"/>
<br/>
<strong>Cap'n Jazz</strong>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="talentButton">
<tr>
<td align="center" valign="bottom" class="talentButtonContent">
<a href="#" target="_blank" title="">STREAM</a>
</td>
</tr>
</table>
</tr>
</table>
<!--//END TALENT -->
</td>
<td align ="center" valign="top" width="33%" class="talentBlockRightColumn">
<!--//BEGIN TALENT-->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<img src="https://dl.dropboxusercontent.com/s/vnjurfc9toklyzw/LIARSkevinnmurphy.jpg?dl=0" height="110" width="150" alt="KevinNMurphy" class="talentImage"/>
<br/>
<strong>LIARS</strong>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="talentButton">
<tr>
<td align ="center" valign="bottom" class="talentButtonContent">
<a href="#" target="_blank" title="">STREAM</a>
</td>
</tr>
</table>
</tr>
</table>
<!--//END TALENT -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- //END TALENT BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="calltoActionContainer" >
<!-- //BEGIN CALL TO ACTION BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="520" id="callToActionBlock">
<tr>
<td align="center" valign="top" class="callToActionContent">
<h3>QueryFest Tickets on Sale Now</h3>
<br />
Don't let your Labor Day weekend suck. Spend it with us and your favorite bands, we promise you'll like it.
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionButton">
<tr>
<td align="center" valign="top" class="callToActionButtonContent">
<a href="#" target="_blank" title="query fest">PURCHASE NOW</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END CALL TO ACTION BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="footerContainer">
<!-- // BEGIN FOOTER BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="footerBlock">
<tr>
<td align="center" valign="top" class="footerContent">
<strong>QueryFest thanks you, the fan for making it possible for us to bring you awesome music
<br />
Without you we would be another random streaming service in cyberspace.
</strong>
</td>
</tr>
<tr>
<td align="center" valign="top" class="footerContent">
© 2015 QueryFest. • 1234 Some Random Street • Denver, Colorado 80204
<br />
<br />
<a href="#" target="_blank">unsubscribe from list</a> <a href="#" target="_blank">set email preferences</a> <a href="#" target="_blank">view in browser</a>
</td>
</tr>
</table>
<!-- END FOOTER BLOCK // -->
</td>
</tr>
</table>
<!-- END EMAIL // -->
</td>
</tr>
</table>
</center> </body> </html> \
1 Answer
Joao Pedro Portela G. Vaz
4,507 PointsYou are using a lot of tables in there. I recommend to avoid using them unless is really necessary. I've tried to clean up a little of your code. Try using divs instead of tables, they are really handy. Take a look at the code and if you have any questions feel free to ask.
rachelweaver
15,876 Pointsrachelweaver
15,876 PointsThanks, but I'm not sure if this will work for an email client. I use divs in regular web design, but the HTML email course on this site recommends tables and inlined CSS to maximize client compatability, as do most email how-to's.