cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
carterbarry88
Advocate I
Advocate I

Create HTML Table - Header not aligned

Hi there,

 

I am trying to create an HTML table using the "Create HTML Table" action. The data is pulled correctly into the table, however the table headers are not aligned correctly but only on the first column. I have tried both with the Select -> Automatic approach as well as creating a custom table and they both have the same error.

 

carterbarry88_0-1603212750038.png

 

This is the end result of what the table looks like. As you can see the data is correct but it the alignment is wrong. I don't know HTML that well so hoping there is a way to fix this or is this just a bug with Power Automate?

 

carterbarry88_1-1603212785885.png

 

1 ACCEPTED SOLUTION

Accepted Solutions
Paulie78
Super User
Super User

Hi @carterbarry88 

 

You cannot control the formatting of the columns directly in the "Create HTML Table Action". But you can modify it's output easily enough as it is only creating HTML. I just tested it and it worked fine. To align your headers you can simply add a "Compose" action right after your HTML Table action and use an expression like this:

 

 

replace(body('Create_HTML_table'), '<th>', '<th align="left">')

 

 

This will change the headers to be left aligned like the body. In your email action use the outputs from the compose action instead of the Create HMTL Table action. So the complete flow looks like this:

 

Align HTML Table.PNG 

 

If I view the HTML source of the message before I made the modification it looks like this:

 

 

<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Mark@outlook.com</td>
</tr>
<tr>
<td>Matthew</td>
<td>Matthew@outlook.com</td>
</tr>
</tbody>
</table>

 

 

And after the compose action it looks like this:

 

 

<table>
<thead>
<tr>
<th align="left">Name</th>
<th align="left">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Mark@outlook.com</td>
</tr>
<tr>
<td>Matthew</td>
<td>Matthew@outlook.com</td>
</tr>
</tbody>
</table>

 

 

And the email looks fine also:

 

EmailHeadersAligned.PNG

Hope this helps.

View solution in original post

2 REPLIES 2
RishabBehl31
Resolver I
Resolver I

Hey @carterbarry88 ,

 

It's not a bug. By default the headers come up as center aligned in "Create HTML Table" connector. So, as you can see in your result headers are center aligned. Even quantity is center aligned but due to small column length it's looking as justified.

 

Way to solve this is look for online html generator tool & customize your table accordingly. Use that html code in the connector as to make your table look as per you desire.

 

----------------------------------------------------------------------------------------------------------------

Thanks for taking my inputs. If you're digging into it, a 'thumbs up' is appreciated! Or if my suggestion solved your issue, please Accept it as a solution. This way everyone would be able to get the solution if they face a similar problem.

Paulie78
Super User
Super User

Hi @carterbarry88 

 

You cannot control the formatting of the columns directly in the "Create HTML Table Action". But you can modify it's output easily enough as it is only creating HTML. I just tested it and it worked fine. To align your headers you can simply add a "Compose" action right after your HTML Table action and use an expression like this:

 

 

replace(body('Create_HTML_table'), '<th>', '<th align="left">')

 

 

This will change the headers to be left aligned like the body. In your email action use the outputs from the compose action instead of the Create HMTL Table action. So the complete flow looks like this:

 

Align HTML Table.PNG 

 

If I view the HTML source of the message before I made the modification it looks like this:

 

 

<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Mark@outlook.com</td>
</tr>
<tr>
<td>Matthew</td>
<td>Matthew@outlook.com</td>
</tr>
</tbody>
</table>

 

 

And after the compose action it looks like this:

 

 

<table>
<thead>
<tr>
<th align="left">Name</th>
<th align="left">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Mark@outlook.com</td>
</tr>
<tr>
<td>Matthew</td>
<td>Matthew@outlook.com</td>
</tr>
</tbody>
</table>

 

 

And the email looks fine also:

 

EmailHeadersAligned.PNG

Hope this helps.

View solution in original post

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (2,705)