I have created an HTML page. In which I am having a table which shows customer's Data. Now I wanted to call a style which will call table row which background, I am calling that but I am missing something due to which tr doesnot show row background. Also I am trying to add space between rows but not between column but I am getting space between both column and rows.
For an example, I have added background to two <tr>
<style type="text/css">
td.tableHeader
{
color: #003678;
font-size: 40px;
font-family: Open Sans;
text-align: center;
font-weight: inherit;
}
tr.background
{
bgcolor: #D0D1CB;
}
</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<!-- ============ HEADER SECTION ============== -->
<td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td>
</tr>
</table>
<!-- ============ (CONTENT) ============== -->
<table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0"
width="100%" align="center">
<tr>
<td class="tableHeader">
Table header
</td>
</tr>
<tr>
<td>
<table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="500" align="center" >
<tr>
<td>
<table class="background" border="0" cellpadding="0" cellspacing="3" width="500" align="center">
<tr bgcolor="#D0D1CB">
<td>
Full Name
</td>
<td>
Abc BCA
</td>
</tr >
<tr bgcolor="#D0D1CB">
<td>
Phone Number:
</td>
<td>
2314568970
</td>
</tr>
<tr>
<td>
Email Address:
</td>
<td>
abc#gmail.com
</td>
</tr>
<tr>
<td>
CustomerID:
</td>
<td>
5566778
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" style="cellpadding="0" cellspacing="0" border="0">
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>
<html>
You can use bgcolor only as an inline attribute, but not as a styling parameter. What you're looking for there is background or background-color.
You'll need to remove a few attributes from the parent table element, like cellspacing="3", which is giving you the space you see around table cells. If you remove this attribute, you can add a border, with the same color as your background, to the table cells; which will separate them in the way you need. See code snippet below:
td.tableHeader {
color: #003678;
font-size: 40px;
font-family: Open Sans;
text-align: center;
font-weight: inherit;
}
tr.background {
background: #D0D1CB;
}
.dataTbl td {
border-collapse: collapse;
border-bottom: 3px solid #e8e9e2;
}
.dataTbl tr {
border-collapse: collapse;
}
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<!-- ============ HEADER SECTION ============== -->
<td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td>
</tr>
</table>
<!-- ============ (CONTENT) ============== -->
<table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0"
width="100%" align="center">
<tr>
<td class="tableHeader">
Table header
</td>
</tr>
<tr>
<td>
<table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="500" align="center" >
<tr>
<td>
<table class="background dataTbl" border="0" cellpadding="0" cellspacing="0" width="500" align="center">
<tr class="background">
<td>
Full Name
</td>
<td>
Abc BCA
</td>
</tr >
<tr class="background">
<td>
Phone Number:
</td>
<td>
2314568970
</td>
</tr>
<tr>
<td>
Email Address:
</td>
<td>
abc#gmail.com
</td>
</tr>
<tr>
<td>
CustomerID:
</td>
<td>
5566778
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" style="cellpadding="0" cellspacing="0" border="0">
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>
<html>
table.background.dataTbl {
border-spacing: 0 3px;
}
table.background.dataTbl {
border-spacing: 0 3px;
}
td.tableHeader {
color: #003678;
font-size: 40px;
font-family: Open Sans;
text-align: center;
font-weight: inherit;
}
tr.background {
background: #D0D1CB;
}
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<!-- ============ HEADER SECTION ============== -->
<td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td>
</tr>
</table>
<!-- ============ (CONTENT) ============== -->
<table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0"
width="100%" align="center">
<tr>
<td class="tableHeader">
Table header
</td>
</tr>
<tr>
<td>
<table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="500" align="center" >
<tr>
<td>
<table class="background dataTbl" border="0" cellpadding="0" cellspacing="0" width="500" align="center">
<tr class="background">
<td>
Full Name
</td>
<td>
Abc BCA
</td>
</tr >
<tr class="background">
<td>
Phone Number:
</td>
<td>
2314568970
</td>
</tr>
<tr>
<td>
Email Address:
</td>
<td>
abc#gmail.com
</td>
</tr>
<tr>
<td>
CustomerID:
</td>
<td>
5566778
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" style="cellpadding="0" cellspacing="0" border="0">
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>
<html>
Related
I've been playing around and can't figure this out, so some advice would be greatly appreciated!
https://codepen.io/chaser87/pen/ZEQvydw
What I want to know deals with just the section headed by Meet your Department. When you shrink down this email, it stacks pretty much how I want it. However, I want to reorder the image and the block of copy in that section. Basically, I want the picture first, then the copy. I've tried doing nth-of-type stuff with elements but isn't working.
For extra background, each section is a 100% table, with a 600 px table within, then another 100% table within.
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<title>Boundless opportunities</title>
<style type="text/css">/*<![CDATA[*//* CLIENT-SPECIFIC STYLES */
body, table, td, hr, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
#media screen and (max-width: 616px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
td {
display: block !important;
}
td img {
display: block !important;
width: 60% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0px 0px 0px 0px !important;
}
h3 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.paragraph-copy {
padding: 20px 15px 20px 15px !important;
font-size: 100% !important;
line-height: 25px !important;
}
.paragraph-align {
text-align: center !important;
}
.social-icons {
padding: 5px 5px 10px 5px !important;
display: inline !important;
width: 15% !important;
}
}/*]]>*/
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/1200x696/000/fff" style="width: 600px;"/>
</td>
</tr>
<tr>
<td class="paragraph-copy" style="padding: 5px 10px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; text-align: left;">
<p>{{First}},</p>
<p>We're excited to welcome you to the {{collegename}}! We look forward to seeing what the future holds for you as a {{major}} major within the Department of {{department}}.</p>
<p>We are here to assist you and look forward to working with you during your time at Generic State University. If we can help you in any way, please let us know. Again, congratulations on taking the next step and joining the {{college}}! </p></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 0px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding-top: 15px">
<!--CONTENT-->
<img src="https://dummyimage.com/220x220/000/fff" style="width: 220px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-align paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 20px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Academic Advisor</span>
</h3>
<p>{{Advisor_Name}}</p>
<p>{{Advisor_Address}}</p>
<p>{{Advisor_Phone_Number}} </p>
<p>{{Advisor_Email}}</p>
<p>{{Advisor_Bio Page}}</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center" style="vertical-align: top;"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 10px 10px 10px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="58%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy paragraph-align" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 10px 10px 10px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Department</span>
</h3>
<p>The {{Department}} is looking forward to your addition to the {{College}} family! </p>
<p>The main office for your department is located in {{department_address}} and you can reach them by phone at {{department_number}} or by emailing {{department_email}}.</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<!--CONTENT-->
<td align="center" style="padding: 15px 10px 10px 10px;"><img src="https://dummyimage.com/200x200/000/fff" style="width: 200px"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 5px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding: 20px 10px 0px 10px">
<!--CONTENT-->
<img src="https://dummyimage.com/210x210/000/fff" style="width: 210px">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 0px 10px"><!--CONTENT-->
<h3>
<span>Mark Your Calendar</span>
</h3>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--CONTENT-->
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 15px 0px 5px 0px; vertical-align: top;"><hr style="border-top: 2px solid #000000; width: 50%;">
<p style="padding-top: 15px;">Bookmark these calendars to stay informed about what's going on:</p>
<p><a style="color: #FE5C00" href="#"><strong>Academic College Calendar</strong></a><strong> | <a style="color: #FE5C00" href="#">College Calendar</a> | <a style="color: #FE5C00" href="#">Athletics Calendar</a></strong></p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/600x95/0fe5c1/fff" style="width: 600px; display: block;" /></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="background-color: black">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td valign>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="left" style="padding: 10px 0px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 12px; line-height: 18px; color: #FFFFFF"><!--CONTENT-->
<p>College of Engineering <br>
Generic State University<br>
136 Whatever Building | Orlando, FL 00000</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="38%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between"><!--CONTENT-->
<td align="right" style="padding: 25px 15px 20px 0px;"><img alt="OSU's Facebook Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Twitter Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Instagram Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Snapchat Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /></td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add reverse class to the cell containing Meet Your Department section's two columns and use the following CSS in your media query:
td:not(.reverse) {
display: block !important;
}
td.reverse {
display: flex;
flex-direction: column-reverse;
}
My email HTML sets widths for Tables / inside content, and it works well on Mac & Mobile; Windows Outlook, on the other hand, has the Header/Footer content at one width, and the Body Content at another (wider) width.
I've been banging my head trying to figure this out - and am at a loss.
I've searched through S.O. to see if others figured this out, but haven't had any luck there, either.
Any help would be appreciated.
Code below:
<body style="padding:0; margin:0;" bgcolor="#dadada">
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Focus on what really matters at work and don't give your feet a second thought when wearing our most popular professional styles: flats, heels and more. </div>
<!-- END PREVIEW TEXT -->
<!-- header wrapper -->
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;table-layout:fixed;">
<tr>
<td align="center">
<table width="600" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0" class="width320" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:14px;min-width:300px !important;">
<tr>
<td>
<table width="2" align="left" cellpadding="0" cellspacing="0" border="0" class="hide" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#ffffff;font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Trebuchet MS', sans-serif;font-size:14px;">
<tr>
<td height="5" valign="middle" style="color:#808080;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;line-height:15px;" mc:edit="preheader"></td>
</tr>
</table>
<table width="100%" align="right" cellpadding="0" cellspacing="0" border="0" class="preheader" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:14px;text-align:left;">
<!-- preheader -->
<tr>
<td height="30" valign="middle" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;color:#808080;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;line-height:15px;"> <b>Look forward to Spring with these hot new styles!</b>
<br> Can't see images? <span style="color:#808080; text-decoration:none;">View this in your browser</span>.</td>
</tr>
<!-- end preheader -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tr>
<td align="center">
<table bgcolor="#ffffff" width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="width320">
<tr>
<td height="20" width="100%" colspan="3"></td>
</tr>
<!-- spacing -->
<tr>
<td width="2" style="color:#ffffff;font-family:'Gotham A', 'Gotham B', Helvetica, Arial, sans-serif;font-size:14px;" valign="middle" align="center">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="width280">
<!-- logo -->
<tr>
<td align="center" mc:edit="logo"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/eee1454a-c0ce-4029-8047-8a13eb4811c3.gif" width="240" border="0" style="max-width:600px;" class="width280" alt="Vionic®">
</td>
</tr>
<!-- end logo -->
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- header nav -->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" style="height:50px;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;color:#ffffff;">
<tr>
<td width="37" class="hide"></td>
<td align="center" width="525" class="nav-block">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="height:25px;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-color:#ffffff;" bgcolor="#000000" class="width320nav">
<tr>
<td align="center" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-family:'MrsEavesOT-Roman', 'times new roman', serif;color:#ffffff !important;padding:10px 0;" class="nav-block"><span style="color:#ffffff; text-decoration:none;">SHOP WOMEN</span>
</td>
<td class="hide"> </td>
<td class="nav-block show" width="1" bgcolor="#FFFFFF" style="font-size:0px;line-height:0px;display:none;height:0px;width:0px;max-height:0px;max-width:0px;"></td>
<td align="center" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-family:'MrsEavesOT-Roman', 'times new roman', serif;color:#ffffff !important;padding:10px 0;" class="nav-block"><span style="color:#ffffff; text-decoration:none;">SHOP MEN</span>
</td>
<td class="hide"> </td>
<td class="hide" width="1" bgcolor="#FFFFFF" style="font-size:0px;line-height:0px;display:none;height:0px;width:0px;max-height:0px;max-width:0px;"></td>
<td align="center" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-family:'MrsEavesOT-Roman', 'times new roman', serif;color:#ffffff !important;" class="hide"><span style="color:#ffffff; text-decoration:none;">SUPPORTIVE TECHNOLOGY</span>
</td>
</tr>
</table>
</td>
<td width="37" class="hide"></td>
</tr>
</table>
<!-- end header nav -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /header wrapper -->
<!-- body wrapper -->
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;"><!-- table-layout:fixed;
--> <tr>
<td align="center">
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;min-width:300px !important;" bgcolor="#ffffff" class="width320">
<!-- full-width copy -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<p style="margin:25px auto 0px;padding:0;font-family:'SackersGothicStd-Medium', sans-serif;font-size:22px;line-height:140%;letter-spacing:1px;color:#000000;text-align:center;text-transform:uppercase;font-weight:500;width:95%;">Step out in subtle chic</p>
<p style="margin:0px auto 15px;padding:0;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:14px;font-style:normal !important;line-height:150%;letter-spacing:1px;color:#000000;text-align:center;width:76%;">Available in bright colours and warm neutrals, our new sandals go everywhere you do, from sunrise to sunset.</p>
</td>
</tr>
<!-- end full-width copy -->
<!-- full-width cta -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320nav" align="center" border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td align="center" style="color:#ffffff;padding:15px 0 0;text-align:center;" mc:edit="herbutton">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:200px;min-width:200px;" width="200">
<tbody>
<tr>
<td align="center" style="max-width:300px;display:block !important;background-color:#ffffff;border:1px solid #000000;padding:10px;font-family:'SackersGothicStd-Medium', sans-serif;font-size:12px;font-weight:500;line-height:105%;letter-spacing:1px;text-align:center;">SHOP SANDALS
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
<!-- three-column content -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center">
<img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/4f936c5d-aec4-407b-bc0e-a6b668abc01f.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Coming Soon: Lorne">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center">
<img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/95cd618b-6e44-4879-9f3b-fad394664080.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Kirra">
<!-- <p style="margin:10px auto;padding:0;font-family:'MrsEavesOT-Italic', 'times new roman', serif;font-size:12px;line-height:120%;letter-spacing:1px;color:#000000;text-align:center;"><a href="https://vionicshoes.ca/products/kirrasandal" style="font-size:12px;color:#ff4621;text-decoration:none;"><span style="font-size: 12px; color: #ff4621; text-decoration:none">
<i>NEW! <span style="color: #000">Kirra</span>
</i></span></a>
</p>-->
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center">
<img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/ecc64309-c40e-407d-af58-62b95e975d2b.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Catalina">
</td>
</tr>
</table>
</td>
</tr>
<!-- end three-column content -->
<!--
<tr>
<td height="10" colspan="2">
</td>
</tr>
-->
<!-- end spacer -->
<!-- Full width image-->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/0f605e1b-bdfc-43fb-9736-c9774b41cc78.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0" alt="Bella">
</td>
</tr>
</table>
</td>
</tr>
<!-- three-column content -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/218d016f-850b-4484-be39-812c898b9de2.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Bella">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/a9f43d2c-aaeb-4128-906c-22c2ec0e7f13.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Bella">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/4cf6b46c-208b-4497-bca1-44c3c6418808.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Bella">
</td>
</tr>
</table>
</td>
</tr>
<!-- end three-column content -->
<!-- three-column content -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/2d57acb7-f623-4f49-90ab-0250e704a248.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Midi Perf">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/b885ec53-341d-4018-8e73-f097c3ec682a.jpg" style="max-width: 196px; margin: auto; padding: 0" width="195" alt="Joey">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/7bc1b19f-f704-458a-8869-9c20b5b2f4dd.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Edie">
</td>
</tr>
</table>
</td>
</tr>
<!-- end three-column content -->
<!-- Full width image-->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/9a07d8b5-7e12-4540-b882-007774b799bd.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0" alt="Bella">
</td>
</tr>
</table>
</td>
</tr>
<!-- <td height="30" colspan="2">
</td>-->
<!-- end spacer -->
</table>
</td>
</tr>
</table>
<!-- /body wrapper -->
<!-- footer wrapper -->
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;table-layout:fixed;">
<tr>
<td align="center">
<table width="600" bgcolor="#373131" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;text-align:center;" class="width320">
<tr>
<td colspan="2" class="width320">
<table width="600" bgcolor="#000000" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#444444;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;text-align:center;" class="width320">
<tr>
<td height="20" width="100%"></td>
</tr>
<!-- spacing -->
<!-- footer nav 1 -->
<tr align="center">
<td>
<table align="center" width="320" border="0" cellpadding="0" cellspacing="0" style="color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:12px;">
<tr>
<td align="center"><span class="block"><span style="color:#ffffff; text-decoration:none;">30-DAY WEAR TEST</span> | <span style="color:#ffffff; text-decoration:none;">FIND A STORE</span></span>
</td>
</tr>
</table>
</td>
</tr>
<!-- end footer nav 1 -->
<tr>
<td height="5" width="100%"></td>
</tr>
<!-- spacing -->
<!-- footer nav 2 -->
<tr>
<td width="100%">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="width320nav">
<tr>
<td align="center" style="color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;text-align:center;"><span class="block"><span style="color:#ffffff; text-decoration:none;">FAQ</span> | <span style="color:#ffffff; text-decoration:none;">CONTACT US</span> | <span style="color:#ffffff; text-decoration:none;">UNSUBSCRIBE</span></span>
</td>
</tr>
</table>
</td>
</tr>
<!-- end footer nav 2 -->
<!-- social -->
<tr>
<td width="100%" class="width320">
<div align="center" mc:edit="socialicons" style="margin:10px auto;padding:0;">
<img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/4f0797d7-defb-47de-a41d-7f5da63c3274.png" width="20" border="0" title="Facebook" alt="4f0797d7-defb-47de-a41d-7f5da63c3274.png"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/b94436f2-347d-4781-bcfa-7f51c0e7460f.png" width="20" border="0" title="Instagram" alt="b94436f2-347d-4781-bcfa-7f51c0e7460f.png"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/4d973ac0-a4a5-42a4-963d-7deddc0b127f.png" width="20" border="0" title="Twitter" alt="4d973ac0-a4a5-42a4-963d-7deddc0b127f.png"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/1b8863d9-8cce-46f3-8fce-aeb3281581b6.png" width="20" border="0" title="Youtube" alt="1b8863d9-8cce-46f3-8fce-aeb3281581b6.png">
</div>
</td>
</tr>
<!-- end social -->
<tr>
<td height="10" width="100%"></td>
</tr>
<!-- spacing -->
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="600" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#444444;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;text-align:center;" class="width320">
<!-- company info -->
<tr align="center">
<td width="600" align="center">
<br><span style="color:#000000">© *|CURRENT_YEAR|* *|LIST:COMPANY|*. All rights reserved.</span>
<br><span style="color:#000000; text-decoration:none;">*|HTML:LIST_ADDRESS_HTML|*</span>
</td>
</tr>
<!-- end company info -->
<tr>
<td height="20" bgcolor="#ffffff"></td>
</tr>
<!--spacer -->
</table>
</td>
</tr>
</table>
<!-- /footer wrapper -->
<!-- gmail ios fix -->
<div style="display:none !important;white-space:nowrap;font:15px courier;color:#ffffff;"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>
</body>
I managed to fix a few things but you will have to work on it more. The easy fixes are:
The image with lady and 30 day wear test didnt have a width on the img tag. Outlook doesnt like retina images so always use image widths for those that will extend beyond your template width.
Lady image fix:
<table class="width320" align="center" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/0f605e1b-bdfc-43fb-9736-c9774b41cc78.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0; display:block;" alt="Bella" width="588">
</td>
</tr>
</table>
Bottom image fixed:
<table class="width320" align="center" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/9a07d8b5-7e12-4540-b882-007774b799bd.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0; display:block;" alt="Bella" width="588">
</td>
</tr>
</table>
Things to note:
You are missing display blocks on images
Once all above fixes are placed in there are white lines between images, you will need to see the images are right sizes and resized the right way to eliminate the annoying lines.
Full fixed code of email can be found here.
Hope this is the answer you were after.
I have the following 2x1 cell where I have an image in cell 1 and text in cell 2. I want rounded corners such as the examples found here. I used border-radius but I still have hard corners. I cannot use CSS as this is for a newsletter that will be emailed out. I appreciate any insight.
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150" style="border-width: 0px" src="http://www.path.com/to/image.png"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span style="font-family: trebuchet ms,verdana,arial,helvetica,sans-serif; font-size: 12px;">
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</table>
The issue is with border-collapse: collapse; you need to use the border-collapse: separate;
<html>
<head>
<style>
td > span {
font-family: trebuchet ms,verdana,arial,helvetica,sans-serif;
font-size: 12px;
}
td > img {
/* border-width: 0px; */
border-radius: 15px 0 0 50px;
}
body > table {
border-collapse: separate;
border-radius: 15px 50px;
border: 3px solid #000;
}
</style>
</head>
<body>
<table width="723" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150"src="http://via.placeholder.com/275x150"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span>
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
Results in:
You can see documentation about the different styles of border on tables at https://www.w3.org/TR/CSS21/tables.html#separated-borders and https://www.w3.org/TR/CSS21/tables.html#collapsing-borders. The snippet above should work in an email or as a stand alone page but would recommend separating the CSS for a standalone page.
Change your table tag from
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
to
<table border="3" width="723" cellspacing="0" cellpadding="0" >
And use this CSS
table {
border: 2px solid;
border-radius: 25px;
}
If you only want this rounded corner on the outer table, then give it an ID or a class and reference the new ID or class in the CSS instead of referencing all table elements.
I want one tr tag on another tr tag.
HTML
<table width="600" align="center">
<tbody>
<tr>
<td height="10" align="center" style="background-color:#f1f1f1;"></td>
</tr>
<tr>
<td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;">
<table width="600" border="0" align="center">
<tbody>
<tr>
<td>
<table width="600" align="center">
<tbody>
<tr>
<td valign="top" align="center" id="1" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; line-height: 30px; letter-spacing:0.5px; text-align:center; padding-bottom: 0px; padding-left: 0px; padding-top: 60px;">
<span class="wrap_textbox" style="font-weight: lighter; font-size: 26px;"> Some Text</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I want the text to be on the top of the background div.
I am not actually sure what are you looking for but if you want to show your text on first background have a look
$(document).ready(function(){
$(".wrap_textbox").clone().appendTo("#top");
});
table tr td table tr td .wrap_textbox{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table width="600" align="center">
<tbody>
<tr>
<td height="10" align="center" style="background-color:#f1f1f1;" id="top"></td>
</tr>
<tr>
<td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;">
<table width="600" border="0" align="center">
<tbody>
<tr>
<td>
<table width="600" align="center">
<tbody>
<tr>
<td valign="top" align="center" id="1" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; line-height: 30px; letter-spacing:0.5px; text-align:center; padding-bottom: 0px; padding-left: 0px; padding-top: 60px;">
<span class="wrap_textbox" style="font-weight: lighter; font-size: 26px;"> Some Text</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
Your question is pretty confusing but why not use <th> to place the text above like so:
<table width="600" align="center">
<tr style="background-color: #f1f1f1;">
<th style="font-weight: lighter; font-size: 26px;">
Some Text
</th>
</tr>
<tr>
<td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;">
<table width="600" border="0" align="center">
<tr>
<td>
more text
</td>
</tr>
</table>
</td>
</tr>
</table>
You can then adjust the <th> style in the CSS to how you want it to be displayed.
Working with provided HTML and I'm looking to figure out why there is a gap in Outlook 07,10,13. Renders fine in other Outlook versions. The gap varies between outlook version, but a gap nonetheless
Screenshot:
HTML Email for review:
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td height="10" colspan="3">
<p style="font-weight:bold; color:#0018A8; font-size:13px">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="10" height="6">
</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="border-style: none">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132">
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's
maiden name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please click here to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</body>
</html>
The pasted example shows the gaps more extremely than I even see in litmus tests, but not showing in Chrome when I test the HTML locally.
FIX was to add inline CSS to the images and remove the <tbody>
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="padding:0;margin:0;display:block;border-style:none;">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
</table>
</th>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's maiden
name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please <a href="http://payments.53.com/forms/SubscriptionManagement"
target="_blank">click here</a> to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>