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
Dual Super User

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
Dual Super User

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.

@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
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Users online (1,453)