Email Marketing Tool

yema911
Membro

Help Including a Table in HubSpot email

resolver

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

 

 

 

 

2 Solução aceitas
MFrankJohnson
Solução
Autoridade no assunto

Help Including a Table in HubSpot email

resolver

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: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com

Exibir solução no post original

0 Avaliação positiva
Alex_
Solução
Top colaborador(a)

Help Including a Table in HubSpot email

resolver

@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.

Exibir solução no post original

17 Respostas 17
MilenaMilanova
Participante

Help Including a Table in HubSpot email

resolver

Highly needed to use table in Email for Dynamic reports send to clients. Specially now with the Operations Hub this need increases significantly. We need to be able to add Customized Properties into the email tables, si we can automate the communications. Sending a bunch of dozens of emails with manual tables is a headache. Please HELP solve this need! @hubspot

 

0 Avaliação positiva
MiaSrebrnjak
Gerente da Comunidade
Gerente da Comunidade

Help Including a Table in HubSpot email

resolver

Hi @MilenaMilanova,

 

Thank you for reaching out to the Community!

I recommend upvoting and commenting on this feature request in our Ideas forum.  Our product team will post updates regarding this feature request there. You can also subscribe to post to get notified about any updates that happen in the thread. Thank you for your understanding!


Mia, Community Team


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst


Did you know that the Community is available in other languages?
Join regional conversations by
changing your language settings

0 Avaliação positiva
danielganoza
Colaborador(a)

Help Including a Table in HubSpot email

resolver

This case should not be solved.

In our case we need to paste tables but these tables are dynamic due to the type of business we have (quotation)
We exported this table from another system and currently we must have a Word, paste the table, cut it as an image and go back to Hubspot .. really too much work for such a simple theme

LViccaro
Participante

Help Including a Table in HubSpot email

resolver

Hubspot - you need to make the table option in the drag and drop email editor. This should not be marked "solved" until that is done.

ECote
Participante

Help Including a Table in HubSpot email

resolver

I just have to say, it seems crazy to me that, rather than HubSpot make the functionality that is available in nearly any other email tool, they choose to ignore the request or propose workarounds that don't address the request. Sigh.

SHamrick
Membro

Help Including a Table in HubSpot email

resolver

Hi Yema, 

 

I'm not sure if this ever really got answered, so one solution I've found is to use HubSpot's free email signature generator (bear with me) and fill it in with whatever dummy text. Then at the end, there's an option to "copy signature source code," and the great thing about this is they use tables to make their email signatures, so now you have the table set up correctly (to HubSpot standards for email) and configured for (some) mobile responsiveness. 

 

Then, add this code you've copied as an HTML element to your email and edit from there. You can take out the placeholder "signature" information and put whatever you want in the table. This definitely takes knowledge of HTML to be able to fully customize the table, but it definitely beats starting the code from scratch in my book. 

 

I wouldn't say this is a solution as it still takes so much effort, but it's worked for me to get around the "rules" here and send out a table I can be pretty confident will work across platforms, browsers, and devices. 

Alex_
Solução
Top colaborador(a)

Help Including a Table in HubSpot email

resolver

@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.

JL73
Participante

Help Including a Table in HubSpot email

resolver

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

SterlingPip
Membro

Help Including a Table in HubSpot email

resolver

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

MFrankJohnson
Solução
Autoridade no assunto

Help Including a Table in HubSpot email

resolver

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: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
0 Avaliação positiva
Kitty
Membro

Help Including a Table in HubSpot email

resolver

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!

Ignite_Nikki
Membro

Help Including a Table in HubSpot email

resolver

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

JL73
Participante

Help Including a Table in HubSpot email

resolver

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? 

MFrankJohnson
Autoridade no assunto

Help Including a Table in HubSpot email

resolver

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: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
MFrankJohnson
Autoridade no assunto

Help Including a Table in HubSpot email

resolver

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: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
Ignite_Nikki
Membro

Help Including a Table in HubSpot email

resolver

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.

yn
Colaborador(a)

Help Including a Table in HubSpot email

resolver

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)