HTML codes for different header background colours

[Grace1209]

Hi

I have been building a PowerAutomate flow to be able to send automated tailored emails. This has been working well but I'm looking to enhance the HTML Table styling and I'm getting a bit stuck. Here is my flow currently that is being used.

And this is the code currently for the style

What I am looking to achieve is to make the table go from this:

to this:

Is this possible in PowerAutomate?

TIA

[David_MA]

I am not sure how you are creating the table, so this may not be possible. If you just need the header row colored, you can use inline styles to achieve what you want. 

<table>
  <tr>
    <th>Total</th>
    <th>Mapped</th>
    <th style="background-color:green">Current</th>
    <th style="background-color:yellow">3-6 Months</th>
    <th style="background-color:red">&gt;=6 Months</th>
    <th style="background-color:darkred">Unmapped</th>
    <th>Mapped %</th>
    <th>Target %</th>
  </tr>
</table>

[Grace1209]

Hi David

Thank you, this is the HTML table would the above work for this?

Output of the table needs to be like this, but with the colours on the 4 columns

It's an apply to each flow and the values come from an excel table. In the HTML table action I use the Item()?[''] formula to get the values needed

[Grace1209]

By adding to the compose step and removing the style code it comes through like this

[David_MA]

You will need to create a string variable. Then you will need to pass your data through an apply to each. Then for each row, you will need to build it manually by adding an Append to string variable in the apply to each. The apply to each would have this code for appending to the string variable:

<tr>
<td>Source</td>
<td>Total</td>
<td>Mapped</td>
<td>Current %</td>
<td>3-6 Month %</td>
<td>>6 Month %</td>
<td>Unmapped %</td>
<td>Mapped %</td>
<td>Target %</td>
</tr>

You would replace the text above with the dynamic values. 

When you build your table as shown in your screen shot, you would insert the variable you create before the closing </table> tag.

[Grace1209]

Hi David

Sorry I'm relatively new to this, would I need to make a variable and an apply to each per header so 9 variables and 9 apply to each in total, then add the above code into the <table> code shared earlier but replace the header names with the values from the apply to each and then can remove the HTML table step from my flow?

Also how does this adapt for when I need to show € amounts for the Total and Mapped columns at the moment in the HTML Table step of the flow I use these formulas FormatNumber(int(items()?['Total']),'€#,###,##0','en') and FormatNumber(int(items()?['Business Rules Mapped']),'€#,###,##0','en') rest of the columns are just item()?[''] formulas? 

I've got it to look like this just struggling to get the values in.

Is it possible if you have some time to draw out what is needed so I can see what needs to go where?

Thanks

[David_MA · Accepted solution]

You just need one Apply to each, which will replace the HTML Table Ageing Action. That one action basically handles the apply to each and generates your entire table. But since you want a custom formatted header with different colors, you need to build the table manually. What I posted earlier is essentially doing the same thing. 

[Barbara666]

Hi Grace,

I had the same problem but i just found a good way to simply join headers and html row contents.

1st: select html contents

2nd: generate row contents

3rd: join headers and html contents (here you can style your headers just as you did) and add join(output( of 2nd step),' ') before </table> 

4th: style your table using compose just to form other styles

5th: in your final output/mails, you add both output of 3rd and 4th step

I can't upload my capture but i got this idea from which didn't directly tell how to solve your problem but really told how to join contents of headers and row contents by creating html content. I believe it will help you solve your problem!

Advanced HTML Tables in Power Automate - Formatting cells, rows and vertical tables