In my previous blog, we learned how to use Lightning email builder to create a lightning email template. We have also discovered the usage of merging fields from records, adding HTML (to design email), embedding images, and sending quick emails using Lightning email templates and prerequisites.

This article will go a step ahead and help you to learn how to add a table in Lightning email templates.

If you come from a Classic email template, you may know various ways to add a table to the email template.

Use Case

Shara Harris, System administrator at Appiuss Inc., While working with Sales Director Jessica, found that the business wants to send an email to customers outlining opportunity details in a table format. Something like this:

Let’s help Shara implement it using the Lightning Email Template. 

Steps to solve the above use case

1. Go to App Launcher | Search Email Templates and click on it. 
2. Click on the New Email Template button. Fill in all mandatory fields and select the appropriate folder.
   1. Email Template Name: Opportunity Details Email Template
   2. Related Entity Type: Opportunity
   3. Folder: Public Email Templates
   4. Subject: – Opportunity Details 
3. Click on Save.
4. Click Edit in Builder button to design your email template with an HTML table.
5. Click on Add Component or drag and drop the HTML component to the row in the template design.

I created a table directly by writing below HTML code. You can use w3schools or any other code generator and use inline styling(CSS) to the table header and rows for fancy styling and merge fields.

<table border="1" style ="background:#e0ecf0" cellspacing="0" cellpadding="0" >
  <tr>
    <th align="left">Account Name</th>
    <td>{{{Opportunity.Account_Name_Formula__c}}}</td>
  </tr>
  <tr>
    <th>Opportunity Name </th>
    <td align="left">{{{Opportunity.Name}}}</td>
  </tr>
  <tr>
    <th align="left">Amount</th>
    <td>{{{Opportunity.Amount}}}</td>
  </tr>
  <tr>
    <th align="left">Stage</th>
    <td>{{{Opportunity.StageName}}}</td>
  </tr>
  <tr>
    <th align="left">Close Date</th>
    <td>{{{Opportunity.CloseDate}}}</td>
  </tr>
</table>

6. Click Save.

Check out the video for step-by-step instructions to add a table.

I hope you find this article helpful. I would love to hear from you! Share your tips in the comments!