Help With Nesting Tables in email...

Nov 10th, 2011 at 10:16 AM
User 2256690 Photo

Jacqueline Uler
Registered User
1 post

I am having trouble nesting a table within a table. I have included a picture of my email HTML so far. what I want is for white section that is down at the bottom to be nested in the Grey body section (the grey section should also span the length of the header image. I have pasted my code below.

Any edits on how to fix would be greatly appreciated:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta content="text/html; charset=unicode" http-equiv="Content-Type"/>
<meta content="en-us" http-equiv="content-language"/>
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"/>
</head>
<body>
<table style="BACKGROUND-COLOR: #c9dbe5; WIDTH: 100%; FONT-FAMILY: Arial; TABLE-LAYOUT: fixed" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="VERTICAL-ALIGN: top" valign="top" align="center">
<table style="TEXT-ALIGN: left" border="0" cellspacing="0" cellpadding="0" width="661">
<tbody>
<tr>
<td style="VERTICAL-ALIGN: top; PADDING-TOP: 25px"><!-- <table border="0" cellspacing="0" cellpadding="0" >
<tbody>--></td>
</tr>
<tr>
<td style="VERTICAL-ALIGN: top"><!---<table cellspacing="0" cellpadding="0" width="100%" border-bottom="0">
<tbody> ---></td>
</tr>
<tr>
<td style="TEXT-ALIGN: right; LINE-HEIGHT: 20px; BACKGROUND-COLOR: #0099cc; WIDTH: 400px; PADDING-RIGHT: 20px; FONT-FAMILY: Arial; COLOR: #ffffff; FONT-SIZE: 18px; VERTICAL-ALIGN: middle; FONT-WEIGHT: bold">
<div id="volume_title" class="mktEditable">can you find mrs. hatfield's plan of care in under 10 seconds?</div>
</td>
<td style="BACKGROUND-COLOR: #0099cc">
<img border="0" alt="Stacks of Medical Documents" align="right" src="http://na-k.marketo.com/rs/kinnser/images/FOIA_AMZINGemailCS_02_HeaderIcon.png" width="261" height="109"/> </td>
</tr><!-- </tbody>
</table> --><td></td><tr></tr><tr>
<td style="PADDING-BOTTOM: 80px; BACKGROUND-COLOR: #ededed; PADDING-LEFT: 20px; PADDING-RIGHT: 0px; FONT-FAMILY: Arial; COLOR: #666666; VERTICAL-ALIGN: top; PADDING-TOP: 0px">
<table style="WIDTH: 100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr style="PADDING-BOTTOM: 20px; LINE-HEIGHT: 40px; BACKGROUND-COLOR: #ededed; PADDING-LEFT: 20px; PADDING-RIGHT: 0px; FONT-FAMILY: Arial; COLOR: #666666; FONT-SIZE: 36px; VERTICAL-ALIGN: top; PADDING-TOP: 0px">

<div id="main_title" class="mktEditable">
<br/>Goodbye, paper. <br/>&nbsp;&nbsp; &nbsp; &nbsp;Hello, amazing.</div>
<td></td>

</tr>
<tr style="LINE-HEIGHT: 20px; WIDTH: 450px; FONT-FAMILY: Arial; COLOR: #666666; FONT-SIZE: 12px; VERTICAL-ALIGN: top">

<div id="main_text" class="mktEditable">
<br/>Hello {{lead.First Name:default=Sir/Madam}},<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br/></div>

</tr>
</tbody>
</table>
<table style="BACKGROUND-COLOR: #0099cc; PADDING-RIGHT: 15px" border="0" width="400">
<tbody>
<tr valign="middle">
<td style="LINE-HEIGHT: 10px; COLOR: #ffffff; FONT-SIZE: 12px; FONT-WEIGHT: bold" width="150">CALL TO ACTION BUTTON </td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>


<table border="0" cellspacing="0" cellpadding="0" width="261">
<tbody>
<tr>
<td style="BORDER-BOTTOM: #45555f thin solid; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 15px; FONT-FAMILY: Arial; COLOR: #ae0000; FONT-SIZE: 17px" width="100%">
<img border="0" alt="Kinnser Software can." align="right" src="http://na-k.marketo.com/rs/kinnser/images/FOIA_AMZINGemailCS8_03_KinnserCanLogo.png" width="261" height="78"/> </td>
</tr>
<tr>
<td style="BORDER-BOTTOM: #45555f thin solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 15px; FONT-FAMILY: Arial; COLOR: #ae0000; FONT-SIZE: 17px; FONT-WEIGHT: bold; PADDING-TOP: 10px" width="100%">
<img alt="Video" align="left" src="http://na-k.marketo.com/rs/kinnser/images/FOIA_AMZINGemailCS_05_Film%20Strip.png" width="38"/> <div id="column_title" class="mktEditable">&nbsp; &nbsp; SEE KINNSER NOW</div></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: #45555f thin solid; PADDING-BOTTOM: 15px; LINE-HEIGHT: 14px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 5px; PADDING-RIGHT: 15px; FONT-FAMILY: Arial; COLOR: #45555f; FONT-SIZE: 12px; PADDING-TOP: 14px">
<div id="column_text" class="mktEditable">KINNSER PROVIDES ESSENTIAL FEATURES FOR EVERY JOB <br/>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="file:///C:/Users/jackie.uler/Documents/CoffeeCup%20Software/HTML%20Editor/Projects/~tmB705.html#">Some Link</a>. </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<td></td>
<tr></tr>
<tbody></tbody>
<table></table>
<td></td>
<tr></tr>
<td style="PADDING-BOTTOM: 20px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; VERTICAL-ALIGN: top; PADDING-TOP: 20px"></td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td style="LINE-HEIGHT: 16px; FONT-FAMILY: Verdana,Helvetica; COLOR: #45555f; FONT-SIZE: 11px; VERTICAL-ALIGN: top" align="center">
<div id="Contact" class="mktEditable">
<b>Kinnser Software </b>2600 Via Fortuna Drive Suite 300 Austin, TX 78746 <br/>Phone:(877) 399-6538 <a href="http://www.kinnser.com/contact_us.htm" target="_blank">Contact Us</a></div>
</td>
</tr>
</tbody>
</table>
<td></td>
<tr></tr>
<tbody></tbody>
<table></table>
<td></td>
<tr></tr>
<tbody></tbody>
<table></table>
</body>
</html>



Nov 10th, 2011 at 11:35 AM
User 364143 Photo

sstovert@satx.rr.com
Guest
5,410 posts

You should be using CSS divs for layout instead of tables.
CoffeeCup... Yeah, they are the best!
Apr 13th, 2012 at 08:30 PM
User 601710 Photo

Ron
Registered User
114 posts

Post is late, but better than never maybe? HTML Email is not the same as the web HTML using the HTML 4.01 doctype. This may help:

How to Code HTML Email Newsletters: http://articles.sitepoint.com/article/c … ewsletters
How to Test Your HTML Email Newsletter Before You Hit Send: http://designfestival.com/how-to-test-y … -hit-send/

How To Code HTML Email Newsletters (All New Version): http://www.reachcustomersonline.com/201 … /09.27.00/
Coding for GoogleMail, LotusNotes, and Outlook 2007: http://www.reachcustomersonline.com/201 … .00/#step4

How to Create and Send HTML Email: http://www.addme.com/newsletters/issue293.htm

Email Marketing Articles and Guides: http://mailchimp.com/

Fractal: Validate Your HTML/CSS Email Code: http://www.makeuseof.com/dir/fractal-va … -html-css/

20 Email Design Best Practices and Resources for Beginners: http://net.tutsplus.com/tutorials/html- … beginners/

Mailing List Code: http://www.bravenet.com/webtools/elist/

G-Lock EasyMail: http://www.glockeasymail.com/

With this new email tool from Gmail you can create HTML formatted newsletters without knowing HTML: https://www.google.com/accounts/Service … mplcache=2

How to Create Great HTML Emails with CSS: http://www.webreference.com/programming/css_html/
Ron

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.