Formatting HTML Tables in Flow
Awhile back I wrote a blog on how to get events from SharePoint and post the events for the day to a Teams Channel. If you’re interested in learning more you can reference that blog here: https://powerusers.microsoft.com/t5/Microsoft-Flow-Community-Blog/Get-SharePoint-Calendar-Events-and-Post-to-Teams/bc-p/324496#M649
The example in the blog utilizes the “Create an HTML Table” action in Flow to output the events results from SharePoint into a nice table format that you can then share in Teams. I got some good feedback that the HTML table which Flow produces leaves a lot to be desired. Many asked how you can add your own styles to that table. In this post, you’ll see the steps needed to apply styles to your HTML Tables in Flow.
Before we go through how to style your tables, let’s take a look at how the table comes across by default before any styling is applied. If you follow the blog post referenced above, this is the output you would see in your Teams channel.
As you can see above, the table doesn’t have any borders and the text is smooshed together which probably isn’t ideal.
Adding Table Borders
As a first step for styling the table, let’s take a look at how we can add in a border around the table and cells to help break out the information. To do this, you’ll need to insert a Compose Action after your Create HTML Table action.
You can use the Replace() expression in Flow to take the table and replace the reference to the table object to include a style. Here’s the expression that you will need to put in your new Compose Action for this:
That expression will add a 1px border around the table object making the outputted table result look like this:
That’s a little better, but the data is still smooshed together so you probably want to add some padding.
To add some space between the text in your table cells, you can insert another Compose Action after the one you just created. You can use the Replace() function again but this time, point it to the Output from your Compose.
The expression needed to add in spacing on the table rows looks like this:
This will put a 20px space all around the row text but you can change that value to be as big or small as you’d like. Now you’ll have a nicely formatted table with spacing!
You can keep repeating this same pattern of Compose actions to replace different objects of the table and insert your own styles.
The characters ‘ and ” in the code are not copied well, have to change them manually.
But the overall it works great.
Sorry about that, those pesky quotes always give me trouble!
Thanks for you contribution.
However, after inserting the function Replace() I didn’t get what you said. The output of the function deleted the structure of the table and didn’t add any lines. Could you please give me hand?
Brilliant, this worked straight away for me. I typed it in as I noticed the formatting was a little off on this page as Daniel said but still extremely helpful in making my email look more organised. Thankyou
Hi April this is really helpful. Saved my day 🙂
Fantastic! Simple and elegant!
However i extended your code. We can simply put css inline style. Hope it will help some one.
This is great – thanks for sharing!