In this post we will take a step by step look on how well we can format the emails sent using HTML and CSS through Power Automate
This is just a manual trigger flow.
I have taken two SharePoint lists for this process.
One is Invoice list and another is product list. The relationship between Invoice and Product list is one to many.
I have divided this process into 4 parts
- The logo and the Company name formatting
- The section that displays Invoice Number, Invoice Period, Invoice To and Total
- The table with header and data
- A small message that shows invoice due date
mailTo is a compose input which consists of hardcoded email address.

The logo and the Company name formatting
cssHeader includes below code
.colImg{float:left;width:30%;padding:16px;height:100px}
.colCompany{float:left;width:30%; height:100px}
*{box-sizing:border-box;}
contentHeader has below code
<div>
<div class="colImg">
<img src="https://wfiot2018.iot.ieee.org/files/2016/01/sample-logo@2x.png" alt="Logo" width="200" height="50"/>
</div>
<div class="colCompany"><br></div>
<div class="colCompany">
<h2><a href="https://docs.microsoft.com"> COMPANY NAME </a></h2>
</div>
</div>

The section that displays Invoice Number, Invoice Period, Invoice To and Total
cssForSecondPart is a compose action that includes CSS for various invoice details
.col{float:left;width:20%;padding:2px;height:120px}
.colPara{font-size:0.66em}
htmlForSecondPart is a compose action that includes html outline for various invoice details.
In this part, replace the content between @{} to that of your content
<div>
<div class="col">
<h5>Invoice Number</h5>
<p class="colPara">@{outputs('getInvoice')?['body/InvoiceNumber']}</p>
</div>
<div class="col">
<h5>Invoice Period</h5>
<p class="colPara">@{outputs('getInvoice')?['body/InvoicePeriod']}</p>
</div>
<div class="col">
<h5>Invoice To</h5>
<p class="colPara">@{outputs('getInvoice')?['body/InvoiceTo']}</p>
</div>
<div class="col">
<h5>Total</h5>
<p class="colPara">@{outputs('getInvoice')?['body/TotalCost']}</p>
</div>
</div>

The table with header and data
cssForTable is a compose action which includes below code
td,th{
border:1px solid #ddd;
padding:0.66em;
}
Table{border-collapse:collapse;width:100%}
tr{font-size:0.66em;}
th{background-color:#80dfff;font-size:2em;font-weight:bold;}
body{background-color:#f5f5f0;}

Take a Create HTML Table action.
From inputs include outputs(‘getItems’)?[‘body/value’]
Header includes values from ‘getItems‘ step

A short message that shows invoice due date
lastMessage is a compose action which includes HTML and CSS for a short message display
<p style="color:red;">Please pay your invoice by @{
formatDateTime(outputs('getInvoice')?['body/InvoiceDueDate'],'dd.MM.yyyy')}</p>
In this part, replace the content between @{} to that of your content

finalResult – Compose includes outputs from below actions
<!DOCTYPE html>
<html>
<head>
<style>
@{outputs('cssHeader')}
@{outputs('cssForTable')}
@{outputs('cssForSecondPart')}
</style>
</head>
@{outputs('contentHeader')}
@{outputs('htmlForSecondPart')}
@{body('Create_HTML_table')}
@{outputs('lastMessage')}
</html>
In this part, replace the content between @{} to that of your content

Result

If you liked the post, please share it with others 🙂
Please feel free to comment if you are stuck in any step
Thank you for reading 🙂