web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Automate / HTML codes for differe...
Power Automate
Unanswered

HTML codes for different header background colours

(0) ShareShare
ReportReport
Posted on by 6

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.

Grace1209_0-1718897869620.png

 

And this is the code currently for the style

Grace1209_1-1718897716736.png

 

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

Grace1209_2-1718897770947.png

to this:

Grace1209_3-1718897800766.png

 

Is this possible in PowerAutomate?

 

TIA

 

Categories:
I have the same question (0)
  • David_MA Profile Picture
    13,491 Super User 2026 Season 1 on at

    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 Profile Picture
    6 on at

    Hi David

     

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

    Grace1209_0-1718909297789.png

     

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

    Grace1209_2-1718910838736.png

     

    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 Profile Picture
    6 on at

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

    Grace1209_0-1718910625249.png

     

    Grace1209_1-1718910646409.png

     

  • David_MA Profile Picture
    13,491 Super User 2026 Season 1 on at

    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 Profile Picture
    6 on at

    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.

    Grace1209_0-1718923120658.png

     

    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 Profile Picture
    13,491 Super User 2026 Season 1 on at

    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 Profile Picture
    2 on at

    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

    Barbara666_0-1721133730119.png

    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

     
     
     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Leaderboard > Power Automate

#1
David_MA Profile Picture

David_MA 60 Super User 2026 Season 1

#2
Haque Profile Picture

Haque 54

#3
Expiscornovus Profile Picture

Expiscornovus 47 Most Valuable Professional

Last 30 days Overall leaderboard