Help Including a Table in HubSpot email

SOLVE
Highlighted
New Member

Hi Yema, 

 

Dealing with issues trying to incorporate a table into HubSpot emails.

Trying to include a performance statistics table with up to 6-8 columns and 3-4 rows, to appear well across email clients. 

However, when the email is sent, it leads to the width of the email being extended too broadly resulting in users having to scroll.

On mobile, the entire email becomes to small to fit in the table. 

 

Wondering if I could get some design help around this to find the best outcome, particularly for outlook email recipients, but generally needed for all. 

 

 

  

Screenshot 2019-02-23 17.11.43.pngScreenshot 2019-02-23 17.12.00.pngScreenshot 2019-02-23 17.12.49.png

 

 

Cheers,

Yema

+6140207623

yema@akbar.company

 

 

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Community Superstar

Yema, maybe consider abandoning the 'email table' idea and use a CTA to direct recipients to a nice landing page with your beautifully designed table instead. (best practice)

 

Just a thought.

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Visit

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

View solution in original post

0 Upvotes
11 Replies 11
Highlighted
Solution
Community Superstar

Yema, maybe consider abandoning the 'email table' idea and use a CTA to direct recipients to a nice landing page with your beautifully designed table instead. (best practice)

 

Just a thought.

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Visit

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

View solution in original post

0 Upvotes
Highlighted
New Member

Hello M. Frank Johnson and Yema,

 

M. Frank - your solution is nice and clean, but those of us on the sales forefront know that links rarely get clicked. It's SO MUCH more effective to have your info right in your email. My issue is similar - I want to include a short table from excel in the body of my email that contains a quote. Impossible to cut and paste, using "paste" or "paste and match style." I don't want to add it as an attachment or link. It will never be looked at! 

 

So - my question - is this possible??

 

Thanks!

Highlighted
Community Superstar

Sure is possible @Kitty. Just gotta build the tables in HTML very carefully.
- see HTML Tables in Email: What could possibly go wrong? from our friends at Litmus Software

 

Litmus Software are also the guys who provide the email client tester included within HubSpot Marketing Pro and Enterprise, so ... 

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Visit

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

Highlighted
Occasional Contributor

I'm also looking at doing a copy and paste of small tables at times in our emails and becomes arduous with Hubspot as emailing tables through hubspot emails is impossible so then need to open gmail and email through gmail. A waste of unnecessary steps.

 

Any advice? (the litmus route is not at an option)

0 Upvotes
Highlighted
Community Superstar

Didn't want to suggest this before, but an image version of your 'table' may prove easier to implement and yield greater success for those on the sales frontlines. And, HubSpot also offers the ability to track views of those images if added as Sales Documents -- i.e., PDFs..

 

 

This clickable image is available via emailThis clickable image is available via email

 

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Visit

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

0 Upvotes
Highlighted
New Contributor

That's fine. FRANK.  But that kind of depletes the purpose. OFTEN, images do not show up in an email. Unless the merchant clicks (display images) which is the point of being able to input a table. 

 

 

Answer me this Frank, why on earth would hubspot not think of adding an option that is so COMMON. What is the development team doing, if they don't have the wherewithal to think of something that is used so often and need in so many email situations?? Please answer that.

Highlighted
New Contributor

Why is this listed as solved? Its not solved, it is disregarded. 

0 Upvotes
Highlighted
New Contributor

Hi Nikki 

We also have a  need to send tables to customers - can't be images or links either.. did you find a work around for this at all? 

0 Upvotes
Highlighted
New Member

I am having the same issue, we need to include a table in our emails...

0 Upvotes
Highlighted
New Contributor

So Hubspot team - any resolve on this and can you open this one back up as its not solved?

0 Upvotes
Highlighted
Top Contributor

@yema911 @Ignite_Nikki @JL73 @SterlingPip -

 

Do y'all have the ability to create custom modules for your emails? If so, you can do this:

 

  • Go to your Design Tools click on File and select the New File in "whatever"
  • Select the Module option
  • Copy and paste the following:

 

<div datahss-responsive-table="true" style="overflow-x: auto; max-width: 100%; width: 100%; margin-left: auto; margin-right: auto;">
<table border="1" style="max-width: auto; width: auto; border-color: transparent; border-style: solid; border-collapse: collapse; table-layout: fixed;" cellpadding="4">
<tbody>
<tr style="background-color: 6a7f100; padding:5pxx;" bgcolor="6a7f100">
<td style="width: auto; background-color: 6a7f100; padding:10pxx;" bgcolor="6a7f100"><span style="color: ffff; font-size:12pxx;"><strong>{{ module.column_a_header }}</strong></span></td>
<td style="width: auto; background-color: 6a7f100; text-align: center; padding:10pxx;" bgcolor="6a7f100"><span style="color: ffff; font-size:12pxx;"><strong>{{ module.column_b_header }}</strong></span></td>
<td style="width: auto; background-color: 6a7f100; text-align: center; padding:10pxx;" bgcolor="6a7f100"><span style="color: ffff; font-size:12pxx;"><strong>{{ module.column_c_header }}</strong></span></td>
<td style="width: auto; background-color: 6a7f100; text-align: center; padding:10pxx;" bgcolor="6a7f100"><span style="color: ffff; font-size:12pxx;"><strong>{{ module.column_d_header }}</strong></span></td>
<td style="width: auto; background-color: 6a7f100; text-align: center; padding:10pxx;" bgcolor="6a7f100"><span style="color: ffff; font-size:12pxx;"><strong>{{ module.column_e_header }}</strong></span></td>
<td style="width: auto; background-color: 6a7f100; text-align: center; padding:10pxx;" bgcolor="6a7f100"><span style="color: ffff; font-size:12pxx;"><strong>5 Year</strong></span></td>
<td style="width: auto; background-color: 6a7f100; text-align: center; padding:10pxx;" bgcolor="6a7f100"><span style="color: ffff; font-size:12pxx;"><strong>Volatility (3 Year)</strong></span></td>
<td style="width: auto; background-color: 6a7f100; text-align: center; padding:10pxx;" bgcolor="6a7f100"><span style="color: ffff; font-size:12pxx;"><strong>Income (?)</strong></span></td>
</tr>
<tr>
<td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">{{ module.column_a_row_1_text }}</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">2.5%</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">2.8%</span></td>
<td style="width: auto; background-color: #879637; text-align: center; padding:10pxx;"><span style="color: #000; font-size:12pxx;"><strong>6.9%</strong></span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">8.5%</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">13.1%</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">nbspp;</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">nbspp;</span></td>
</tr>
<tr>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">Freehold AREITss &amp; Listed Infrastructure Fund (net of fees)</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">2.4%</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">1.4%</span></td>
<td style="width: auto; background-color: #879637; text-align: center; padding:10pxx;"><span style="color: #000; font-size:12pxx;"><strong>1.8%</strong></span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">6.2%</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">12.2%</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">nbspp;</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">nbspp;</span></td>
</tr>
<tr>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">AREITss Index*</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">1.7%</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">(1.7%)</span></td>
<td style="width: auto; background-color: #879637; text-align: center; padding:10pxx;"><span style="color: #000; font-size:12pxx;"><strong>3.3%</strong></span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">7.8%</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">13.2%</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">nbspp;</span></td>
  <td style="width: auto; color: #000; padding:10pxx;"><span style="font-size:12pxx;">nbspp;</span></td>
</tr>
</tbody>
</table>
</div>

 

 

  • After doing this, click on the Add field in the right-side column and select Text in the content column
  • Depending on how many columns and rows you need/have, you'll need to create the same amount of text fields
  • Give each text field a specific name so each one is different like so:

Screenshot 2020-10-15 151637.png

  • Each text field should look similar to this:

Screenshot 2020-10-15 151659.png

 Screenshot 2020-10-15 151721.png

  • Click on Copy and select the Copy value only option
  • For each <td></td>, you're going to want to add in the value for each field before the </span> for every row just as the table code shows towards the top of my post
  • After you've completed adding all of the text fields into the table, click Publish

Within the email:

  • Click on the More option under Content, select the custom module you just created and drag it over to your email:

Screenshot 2020-10-15 151939.png

 After doing that, your email should look like this:

 

Screenshot 2020-10-15 153953.png

 

Just fair warning: Tables in general aren't all that mobile responsive, so you might have an issue with that. But for desktop viewers, this should be good to use.

 

Hope this helps.