“I’d like to add some colours to an HTML table, can Power Automate use different colours based on the cell value?”
The basic HTML tables created by Power Automate are very simple. Just a combination of black and white, without any colours. If you want to change the design, you’ll have to add some styling by yourself as described in this article by Paul. But that’s formatting of the whole table where every cell will look the same. What if you want to add additional colours based on the cell value? For example, use the red colour for items with a due date more than 3 days ago?
Add a conditional HTML formatting
To change the format you’ll need two things – a condition to evaluate the value, and HTML code to change the colour if the condition is true.
Since you can’t preprocess the data for the HTML table, the condition must be done using the if(…) expression. Start by checking the value, e.g. if it’s more than 3 days ago.
if(Date < Today - 3, <ifTrue>, <ifFalse>)
Extending the previous article on sending reminders, it might look as below. If you’re not sure what the condition should look like you can use the ‘Filter array’ action to build it.
if(less(item()?['Date'],addDays(utcNow(),-3)), <ifTrue>, <ifFalse>)
Now it’s time to add the formatting. It’ll be the same approach as when adding hyperlink to the HTML table, you must add the HTML code. Below is a piece of code that’ll display the ‘text to show in red’ in the red colour.
<span style="color:red">text to show in red</span>
That’s the piece of code you must add in the <ifTrue> part of the condition. Use concat(…) to separate the fixed html tags from the dynamic value.
if(less(item()?['Date'],addDays(utcNow(),-3)), concat('<span style="color:red">', item()?['Date'], '</span>'), <ifFalse> )
For the <ifFalse> outcome use the value as it is, there’s no need for any special formatting.
if(less(item()?['Date'],addDays(utcNow(),-3)), concat('<span style="color:red">', item()?['Date'], '</span>'), item()?['Date'] )
If you use such expression in the ‘Create HTML table’ action it’ll add all the necessary HTML tags to the email. But it’ll add them as a text, not as a code.
To convert them into a code you must replace some of the special characters as explained in the hyperlink article.
The result will be a nicely formatted table with a different colour based on the condition result.
When you create an HTML table in Power Automate, you don’t have to stick to the plain table, you can add also some colours. You can add a colour schema for the whole table, and you can also change colours based on the values.
Since you can’t do any preprocessing before creating the table, all the logic must be in the action itself. An if(…) condition to evaluate all the values, and a piece of html code to add to some of them. Turn it back from text into code using a few replace(…) expressions and you’ll get much more colourful tables.