cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
AdamW
Helper III
Helper III

Format HTML table with dynamic data when number of rows changes

I need to send 10,000 emails that contain dynamic data.  I have created a flow using the "Create HTML Table" action.  The problem is that the formatting looks terrible.  All of the options that I see out there require the number of rows to be static in order to apply the formatting properly.  These emails will have rows that range anywhere from 2 rows to 200 rows.  What are my options to do this?

1 ACCEPTED SOLUTION

Accepted Solutions
Mira_Ghaly
Dual Super User II
Dual Super User II

Hi @AdamW 

You can apply style to your HTML table 

1. You need to give your HTML Table an ID

Mira_Ghaly_0-1611534451353.png

replace(body('Create_HTML_table'),'<table>','<table id=contactsTable>')
2. Add your preferred style as a compose data operation like below: replace #contactsTable with your table id
 
Mira_Ghaly_3-1611534648214.png

 

 

3. Concatenate the style with the HTML table prior to sending in a compose data operation and use the  output of the compose data operation in your email

concat(outputs('Style'),outputs('Replace_Table_With_ID'))
 
Hope this works for you!

 

If this post helps you with your problem, please mark your as Accepted solution.If you like my response, please give it a Thumbs Up.

Blog: here

View solution in original post

4 REPLIES 4
Mira_Ghaly
Dual Super User II
Dual Super User II

Hi @AdamW 

You can apply style to your HTML table 

1. You need to give your HTML Table an ID

Mira_Ghaly_0-1611534451353.png

replace(body('Create_HTML_table'),'<table>','<table id=contactsTable>')
2. Add your preferred style as a compose data operation like below: replace #contactsTable with your table id
 
Mira_Ghaly_3-1611534648214.png

 

 

3. Concatenate the style with the HTML table prior to sending in a compose data operation and use the  output of the compose data operation in your email

concat(outputs('Style'),outputs('Replace_Table_With_ID'))
 
Hope this works for you!

 

If this post helps you with your problem, please mark your as Accepted solution.If you like my response, please give it a Thumbs Up.

Blog: here
AdamW
Helper III
Helper III

This is certainly the easiest explanation I have seen so thank you!.  The only problem is that I don't understand how I give the table an ID.  I am using divtable.com to generate the style.

Mira_Ghaly
Dual Super User II
Dual Super User II

@AdamW 

 

To Give a table an ID you need to add a compose data operation with Replace Expression as below:

replace(body('Create_HTML_table'),'<table>','<table id=myTable>') ; This gives the output table of your Create HTML table an id called myTable
Lets say you have the below CSS style generated from divtable, In notepad or any word editor you can replace table.greenTable with #myTable .. I hope this is what you are looking for 🙂
 

table.greenTable {
font-family: Georgia, serif;
border: 6px solid #24943A;
background-color: #D4EED1;
width: 100%;
text-align: center;
}
table.greenTable td, table.greenTable th {
border: 1px solid #24943A;
padding: 3px 2px;
}
table.greenTable tbody td {
font-size: 13px;
}
table.greenTable thead {
background: #24943A;
background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
border-bottom: 0px solid #444444;
}
table.greenTable thead th {
font-size: 19px;
font-weight: bold;
color: #F0F0F0;
text-align: left;
border-left: 2px solid #24943A;
}
table.greenTable thead th:first-child {
border-left: none;
}

table.greenTable tfoot {
font-size: 13px;
font-weight: bold;
color: #F0F0F0;
background: #24943A;
background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
border-top: 1px solid #24943A;
}
table.greenTable tfoot td {
font-size: 13px;
}
table.greenTable tfoot .links {
text-align: right;
}
table.greenTable tfoot .links a{
display: inline-block;
background: #FFFFFF;
color: #24943A;
padding: 2px 8px;
border-radius: 5px;
}

If this post helps you with your problem, please mark your as Accepted solution.If you like my response, please give it a Thumbs Up.

Blog: here
AdamW
Helper III
Helper III

Nevermind!  I figured it out!

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

New Ideas Forum MPA.jpg

A new place to submit your Ideas for Power Automate

Announcing a new way to share your feedback with the Power Automate Team.

MPA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

MPA Licensing.jpg

Ask your licensing questions at the Power Automate AMA!

Join Priya Kodukula and the licensing team, super users and MVPs to find answers to your questions on Power Automate licensing.

Users online (1,880)