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.

Default Behavior

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:

replace(body(‘Create_HTML_table’),'<table>’,'<table border=”1″>’)

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.

Adding 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:

replace(outputs(‘FormatTable’),'<td>’,'<td style=”padding:20px”>’)

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.