I am running into an issue with Outlook PC not wanting to place nicely with my product images and product names.
Across all other email clients we have tested, the names appear below the products as we expected, however with Outlook PC we are getting the product names bumping up next to the image like this -
Product names next to image
My question is how do we make it stop? Haha. I have included the code for one of the products to show what we are doing, but have removed links to our site for obvious reasons.
<!-- Product 1 -->
<td valign="top" align="center" class="product-image-wrapper" style="display: block; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'Century Gothic', 'MS Serif', 'New York', Tahoma, Arial, Helvetica, 'Open Sans'; width: 25%; padding-bottom: 20px; margin: 0;">
<a href="#" target="_blank" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Century Gothic', 'MS Serif', 'New York', Tahoma, Arial, Helvetica, 'Open Sans'; text-align: center; line-height: 1.3; font-weight: 300; width: 100%; display: block; color: #53565a; text-decoration: none; margin: 0; font-size: 10px;">
<span style="font-family: 'Century Gothic', 'MS Serif', 'New York', Tahoma, Arial, Helvetica, 'Open Sans'; width: 146px; height: 146px; display: block; margin: 0 auto 5px; border: 1px solid #edeeee;">
<img src="http://placehold.it/146" alt="Place Holder Image" width="146" style="display: block; -ms-interpolation-mode: bicubic; height: auto !important; line-height: 100%; outline: none; text-decoration: none; width: 146px; margin: 0 auto; border: 0;" />
</span>
First Christmas Personalized Ornament
</a>
</td>
<!-- // End Product 1 -->
I'm thinking the text needs to be wrapped up in something, but I'm just not sure what or how. So any advice, tips, or help would be greatly appreciated.
Please let me know if you need anymore details from me on what the code looks like. With HTML emails being inlined, most all of our styling is right there, other than some mobile specific stuff.
Thanks in advance everyone!
I think if you put "First Christmas Personalized Ornament" text in span element and add style="display:block;" to the span, it will be fixed.
Atakan.
Related
Beginner at HTML. I have created this html email that displays perfectly fine and central in thunderbird but in Apple Mail, it is stuck on the right, anyone got any ideas?
this is the email in apple mail that is aligned to the right - I want it in the centre!
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
<title>Fusion CSA Accept Email</title>
<style type="text/css">
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This is preheader text. Some clients will show this text as a preview.</span>
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<th>
<img src="http://fusiondiscordbots.com/Email Images/icon.png" height="50px" width="100px">
<h1 style="font-family: SinkinSans 300Light; font-size: 250%;">Thanks for applying</h1>
</th>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px; Margin-top: 20px;">Hi [INSERT NAME],</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">We would like to thank you for your applciation to become a Fusion Customer Support Agent. After carefully reviewing your application, we have decided to <font color="green"><i><b>Accept</b></i></font> your application. We look forward to welcoming you to the team and working with you in the future.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">In the next 48 hours, we will send you some information about your role. In this information will be some terms that we require you to accept by emailing us back. Once the terms have been accepted, we will announce your new position to the server and give you your new role.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">Well all thats left to say is... Congratulations!</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">With appreciation,</p>
<img src="http://fusiondiscordbots.com/Email Images/seansignature.png" height="50px">
<p style="width: 50%;">Sean Hatch<br>
Fusion Managing Director</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END CENTERED WHITE CONTAINER -->
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
I just want to be able to send this email to couple of people but I want it to look professional and line up in the centre of all email clients. If anyone could help, it would be appreciated.
Thanks in advance,
Sean.
Your email looks fine in every Apple and IOS email client I looked at in Litmus. The logo and “Thanks for Applying” are not centered in Yahoo! mail.
The biggest issue is that you're not properly formatting your height and width for the logo and the signature graphics.
Instead of this:
icon.png" height="50px" width="100px"
Do this:
icon.png" height="50" width="100"
Outlook doesn't understand height="50px" so the images are the size of the width of the email. That fix and adding a center tag to the table cell for the logo makes your email look great for your recipients.
Good luck to [INSERT NAME] on their new job.
I have successfully used style="text-align: center;" as an inline style for the <tr> elements to centre content.
I am getting a gap at the end/beginning of just 2 cells in my email and I can't for the life of me figure out why.
The cell-padding is set to 0
cell-spacing = 0
Here's what I have:
<style type="text/css">
h1,h2,h3,h4,h5,h6,h7 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;}
h1 {
font-size: 20px;
color: #B99350;
line-height: 1;
font-size: 25px;
padding-top: 10px;
font-align: center;
font-weight: normal;
text-align: center;
}
h3{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;
color: #B99350;
font-size: 24px;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 10px;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: capitalize;
}
h4{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;
color: #b99350;
font-size: 22px;
padding-right: 10px;
padding-left: 15px;
font-style: normal;
text-align: left;
font-weight: normal;
}
h5{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.3;
font-weight: normal;
color: #FAFAFA;
font-size: 14px;
padding-top: 3px;
color: #FCFCFC;
}
h6{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.3;
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
padding-left: 15px;
color: #FFFFFF;
}
h7 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
padding-top: 3px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 15px;
color: #FFFFFF;
line-height: 25px;
}
h8 {
padding-left: 15px;}
h9 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10px;
padding-top: 3px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 15px;
color: #FFFFFF;
line-height: 25px;}
body,td,th {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
padding-top: 3px;
padding-bottom: 10px;
color: #FFFFFF;
line-height: 20px;
}
li {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 18px;
color: #FFFFFF;
line-height: 1em;
padding-top: 10px;
}
body {
background-color: #FCFCFC;
}
.blue {
color: #B99350;
}
</style>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" valign="center" ;
>
<tbody>
<tr>
<td colspan="2" bgcolor="#201545" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<h7>• AA rated State Government of South Australia occupies 76% of the NLA</h7>
<br>
<h7>• $13 million* spent in refurbishments between 2008 and 2016</h7>
<br>
<h7>• 5.3 year WALE and 97% occupancy</h7>
<br>
<h7>• Located in the core of Adelaide’s CBD</h7>
<br>
<h7>• Surplus land area with development potential</h7>
<br>
<h7>• Fully leased net income of $9.3 million*</h7>
<br>
<h7>• Net lettable area of 19,855sqm*</h7>
<br>
<h7>• 4.5-Star NABERS Rating</h7>
</p>
<h7><strong>Please click here to view the Information Memorandum
<h7></strong><br>
<h9>* approx </h9>
<hr valign="top" width="100%" size="4px" color="#9D7F4A" align="left" style="border-collapse: collapse;" >
<h4>FOR SALE VIA EXPRESSIONS OF INTEREST CLOSING 5PM (AEDT) THURSDAY, 20 OCTOBER 2016</h4></td>
<tr><td valign="top" width="232" align="left" bgcolor="#201545" cellspacing="0" style="padding-left: 15px; ";><img src="JLL_Logo_Rev_WEB.png" width="97" height="42" alt="JLL"/>
<h5><strong>Rob Sewell<br>
</strong>+61 407 243 229<br>
rob.sewell#ap.jll.com</h5>
<h5><strong>Jamie Guerra</strong><br>
+61 418 849 780<br>
jamie.guerra#ap.jll.com</h5>
<h5><strong>Roger Klem <br>
</strong>+61 423 919 373<br>
roger.klem#ap.jll.com
<br>
<br>
<strong>INTERNATIONAL</strong><br>
<strong>Stuart McCann<br>
</strong>+65 8522 1031<br>
stuart.mccann#ap.jll.com</h5></td>
<td valign="top" bgcolor="#201545" style="color: #2BACE2; padding-left: 15px;"><img src="KnightFrank_LR.png" alt="KnightFrank" width="108" height="54"/>
<h5><strong>Guy Bennett<br>
</strong>+61 418 808 548<br>
< guy.bennett#au.knightfrank.com</h5>
<h5><strong>Lukas Weeks</strong><br>
+61 434 957 537<br>
lukas.weeks#au.knightfrank.com</h5>
<h5><strong>James Parry</strong><br>
+ 61 408 553 000<br>
james.parry#au.knightfrank.com
<br>
<br>
<strong>INTERNATIONAL</strong><br>
<strong>Neil Brookes<br>
</strong>+65 8309 4985<br>
neil.brookes#asia.knightfrank.com</h5></td>
</tbody>
</table></tr>
</body>
</html>
There are 2 columns/cells in this section and both are sitting with a massive gap between the (missing) logos and the text above it and I can't figure out how to close it...
Please help!
Thanks
P.S. the top code is not to the end. But I wasn't allowed to show the rest as it was "too much HTML" not enough question...
I HAVE THE ANSWER -
at the very end the
is after & and should be before them.
Simple as that. Swapped it in front and all fixed!
First of all, this is NOT how you use tables!
W3Schools Tables Link
Secondly, the space after each email field is the margin for the h5 tag. See that all your data is wrapped in an h5 tag? Those provide a top-bottom margin. Try removing it to see the effects. You cant call these "cells" because you are not wrapping the individual items in td tags.
Also, dont forget to close your tables.
I'm having problem styling the Calendar Invite link with CSS in an HTML email. This is the output of final HTML email:
<td class="textStyle" colspan="2" align="left" style="font-size: 16px; line-height: 22px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: 'avenir', Helvetica, sans-serif; color: #333333;"><a class="blueLink" style="font-size:
16px; line-height: 22px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #0088CC; text-decoration: none; font-family: 'avenir', Helvetica, sans-serif; font-weight: normal;"></a>Click here to add the event to your calendar.</td>
As you see Marketo will automatically insert an entire a tag with the ics and I'm not able to style it in the HTML email. Any suggestions?
You can wrap the link text of the ICS token in a span to add the appropriate styling to your link.
The text blocks inside my table do not render correctly when viewed in Apple Mail on the iPhone. However, the text appears fine on Outlook 2003, 2007, 2010, and Apple Mail on the desktop. On the iPhone it does not reduce with the rest of the email. The body email appears to render correctly, but not the footer text (both of which are inside tables). The only other place the text does not appear correctly is the date line at the top.
This is the portion of the style sheet affecting the footer:
.FooterText {
font-size: 7pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 11pt;
}
a.FooterLink {
font-size: 7ptem;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 6pt;
font-style: normal;
text-align: center;
}
</style>
</head>
This is the code for the footer area:
<table width="650" border="0" cellspacing=0 cellpadding=0 bgcolor="#0064C8">
<tr>
<td width="2%"> </td>
<td width="19%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Unsubscribe</strong></p>
<p class="FooterText">You are receiving this email because you are a member of NALP.</p>
<p class="FooterText">To unsubscribe from this [email type] related emails, please
<unsubscribe style="text-decoration:none; color:#FFFFFF;">click here</unsubscribe>
.</p></td>
<td width="26%" style="padding-top: 15px; padding-left: 12px; padding-right: 10px; padding-bottom:25px" class ="FooterText"><p class ="FooterText"><strong>Discover NALP</strong></p>
<p>About NALP<br />
Conferences & Events<br />
Member Portal<br />
NALPconnect<br />
<a href="https://netforum.avectra.com/eweb/shopping/shopping.aspx?site=nalp&webcode=shopping&cart=0&shopsearchCat=Merchandise&sort=4&" class="FooterLink" >Bookstore</a><br />
Job Center</p></td>
<td width="28%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class="FooterText"><strong>About NALP</strong></p>
<p class="FooterText">NALP believes in fairness, facts, and the power of a diverse community. We work every day to be the best career services, recruitment, and professional development organization in the world because we want the lawyers and law students we serve to have an ethical recruiting system, employment data they can trust, and expert advisers to guide and support them in every stage of their careers.</p></td>
<td width="24%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Contact Us</strong></p>
<p class="FooterText">NALP<br />
1220 19th Street, NW<br />
Suite 401<br />
Washington, DC 20036</p></td>
</tr>
</table>
I've tried some a media query to reduce the font size but doesn't seem to work either:
#media only screen and (max-device-width: 480px) {
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
}
a.FooterLink {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 4pt;
font-style: normal;
text-align: center;
}
}
First of all use text size in pixels, and add this in your style: -webkit-text-size-adjust:none;
ie:
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
-webkit-text-size-adjust:none;
}
I am very new to CSS and i am trying to format an email using the cfmail tag. Below is the code:
<cfmail from="ABC#xyz.com"
to="#InvestigatorEmail#"
subject="Reminder #flagReminder#:: Incident Report: #report_number#">
<style>
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: ##fff
}
BODY {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
P {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
LI {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
A {
COLOR: ##0c479d; TEXT-DECORATION: none
}
A:hover {
BACKGROUND-COLOR: ##d3deed
}
table{
width:100%;
border-bottom:1px solid ##eee;
clear:both;
color:##000;
margin-bottom:10px;
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
td {
padding:3px 4px;
vertical-align:top;
border-right:1px solid ##ddd;
color:##000;
font-weight:bold;
margin:0;
}
tr.odd {
background-color:##ffffcb
}
td.row-header {
width:100px;
font-weight:normal;
}
</style>
The below Incident Report has been assigned to you on #DateFormat(InvestigationAssigned_tms,"dd-mmm-yyyy")#</br></br>
<table width="720">
<tr>
<td>Incident Report #</td>
<td>Person Involved</td>
<td>Incident Description</td>
<td>Incident Location</td>
<td>Status</th>
<td>Investigation Assigned Date</td>
</tr>
<tr>
<td>#report_number#</td>
<td>#NameOfPersonInvolved#</td>
<td>#IncidentDescription#</td>
<td>#IncidentLocationCity#</td>
<td>#reportStatus#</td>
<td>#InvestigationAssigned_tms#</td>
</tr>
</table>
</cfmail>
All the data is coming from a query which i am looping through to send emails to different people. I need the data concerning one person to be displayed in a tabular format. I'm not sure what i am doing wrong here since this is the first time i am trying to use HTML/CSS in an email.
You need to use the type="html" attribute on the CFMAIL tag.
You might also want to consider wrapping your HTML content in the appropriate HTML and Body tags, as you would normally expect from a HTML template.
<cfmail from="ABC#xyz.com"
to="#InvestigatorEmail#"
subject="Reminder #flagReminder#:: Incident Report: #report_number#"
type="html">
<html>
<body>
<style>
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: ##fff
}
BODY {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
P {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
LI {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
A {
COLOR: ##0c479d; TEXT-DECORATION: none
}
A:hover {
BACKGROUND-COLOR: ##d3deed
}
table{
width:100%;
border-bottom:1px solid ##eee;
clear:both;
color:##000;
margin-bottom:10px;
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
td {
padding:3px 4px;
vertical-align:top;
border-right:1px solid ##ddd;
color:##000;
font-weight:bold;
margin:0;
}
tr.odd {
background-color:##ffffcb
}
td.row-header {
width:100px;
font-weight:normal;
}
</style>
The below Incident Report has been assigned to you on #DateFormat(InvestigationAssigned_tms,"dd-mmm-yyyy")#</br></br>
<table width="720">
<tr>
<td>Incident Report #</td>
<td>Person Involved</td>
<td>Incident Description</td>
<td>Incident Location</td>
<td>Status</th>
<td>Investigation Assigned Date</td>
</tr>
<tr>
<td>#report_number#</td>
<td>#NameOfPersonInvolved#</td>
<td>#IncidentDescription#</td>
<td>#IncidentLocationCity#</td>
<td>#reportStatus#</td>
<td>#InvestigationAssigned_tms#</td>
</tr>
</table>
</body>
Hope this works for you?
Also note, that your issues may be due to the complexities of using CSS in emails...which is always a pain. CSS support in emails is limited and very basic. This isn't a ColdFusion / CFML issue, it's just the way HTML emails are today.
I would recommend moving your CSS to be 'inline' on the HTML tags themselves, as email clients often strip out the STYLE tags.
Mikey.
It's really simple, you just need to add a type to your cfmail tag. It would look something like
<cfmail to="recipient" from="sender" subject="subject" type="html"></cfmail>
Alternatively, you can specify the HTML part using the cfmailpart tag. This also allows you to specify a separate plaintext version for anyone who might be using a mail browser that won't render HTML.
e.g.
<cfmail>
<cfmailpart type="html">... your table here ...</cfmailpart>
<cfmailpart type="text">A plaintext version for everyone else</cfmailpart>
</cfmail>
NB: don't specify both the type="html" on the <cfmail> tag AND the <cfmailpart> tags together. Either do one or the other (it's simpler to just do the type="html" on the <cfmail> but I prefer to do both plaintext and HTML).