Fromat HTML table to use in Word document

[FlowFumbler]

Hi Power Automate Gods,

I successfully created an HTML table after making an API call via Power Automate.

However, I want to load this info into a Word document. 

Output from 'Create HTML Table' (changed a little to hide sensitive info)

<table><thead><tr><th>ID</th><th>displayName</th><th>created</th></tr></thead><tbody><tr><td>1269314</td><td>Automation for XXX</td><td>2023-11-20T14:06:01.661+0100</td></tr><tr><td>1269342</td><td>Salesforce &amp; XXX Cloud Connector</td><td>2023-11-20T14:13:58.223+0100</td></tr><tr><td>1269461</td><td>Salesforce &amp; XXX Cloud Connector</td><td>2023-11-20T14:45:30.110+0100</td></tr><tr><td>1278551</td><td>Firstname Lastname</td><td>2023-11-27T10:30:10.395+0100</td></tr><tr><td>1278552</td><td>Automation for XXX</td><td>2023-11-27T10:30:14.029+0100</td></tr></tbody></table>

However I do not seem to be able to get this table to look somewhat like this in a Word document:

Could you please help me out?

Thank you in advance.

Best regards,

FlowFumbler

[eliotcole · Accepted solution]

Hi, @FlowFumbler, I have two suggestions:

1. CSS - Add CSS to your flow actions using:
   1. A generator such as the codebeautify css table generator
   2. A Compose action with just the <style> code and the Create HTML table action code with a replace function to add the ID to the table tag
2. Word --> HTML - Use an example word doc:
   1. Make the same table on its own in a separate word document now
   2. Open the docx file in something like notepad++
   3. Look at the table html
   4. Use logic to replicate in flow

I will give you some detail for the first of these below, but you can extrapolate enough (I'm sure) to work out the second.

There is one word of caution that I would use regarding all of this, and that is that Microsoft Outlook is the scourge of email clients across the world due to the word handler which 'shows you' the emails. It is why all emails are built out of tables, believe it or not.

Anyway, yes, it is somewhat picky when it comes to obeying CSS, so you might need to go an extra step and actually place 'style' attributes in the <table> and every <th> and <td> element. 😩 I am not going to go to that length for you, but I'm sure that you can figure it out.

CSS Method

Hopefully this is simple enough, and hopefully this works (! ) 😅:

1. Open your chosen online generator and make the code.
2. Copy only the code that is in the <style> tags and ensure you include the style tags
   (see Example - Style Code below)
3. Add a Compose action
4. Paste in the style code
5. Add a line break
6. Add a replace function similar to the Example - replace() Expression below

Example - Style Code

In the below spoiler is some example HTML and CSS code which would style a simple HTML table relatively easily:

Spoiler

<style>
	#demTable {
		border:3px solid #ffffff;
		border-collapse:collapse;
		padding:3px;
	}
	#demTable th {
		border:3px solid #ffffff;
		padding:3px;
		background: #9f009f;
		color: #ffffff;
	}
	#demTable td {
		border:3px solid #ffffff;
		text-align:center;
		padding:3px;
		background: #fff0ff;
		color: #313030;
	}
</style>

Notice how the generator which I used from codebeautify let me choose to do this by 'ID'?

I chose this option because if I put an ID on the table it will make the table uniquely identifiable and not format other tables in the email the same!

Example - replace() Expression

This example assumes that the HTML table action is named "Create HTML table" in your flow:

replace(body('Create_HTML_table'), '<table>', '<table id="demTable">')

This simply looks for '<table>' in the text from that action and replaces it with the '<table id="demTable">' text.

Hope that this can assist you a bit on your way to finding a fuller solution.

The Compose Action

This is an image of what the compose action might look like:

Style code and replace() function