cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
tarastanhope
Frequent Visitor

Table Layout in Email body Headings in first Column

Hi, how can I get table to represent with headings in first column rather than first row in the body of an email
I can get the form response to show as per the left but want  the email body to look like the right image.
Any suggestions for easy solutions would be greatly appreciated.
I need the headings in the first column and the dynamic response will go to second column.  I set up the right version using HTML table

tarastanhope_1-1658822776763.png

Flow below... is there a different way?

tarastanhope_2-1658822981616.png

tarastanhope_4-1658823025900.png

 

1 ACCEPTED SOLUTION

Accepted Solutions
v-yujincui-msft
Community Support
Community Support

Hi @tarastanhope ,

 

I agree with what @SimonSmith84 said, you could try to built the HTML code from scratch instead of use the 'Create HTML table' Action.

 

I have made a simple test for your reference.

<!DOCTYPE html>
<html>
<head>
<style>
table.tb1 {
  border: 1px solid #1C6EA4;
  text-align: left;
  border-collapse: collapse;
}
table.tb1 td, table.tb1 th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.tb1 td {
  width: 25%;
}	
.td1 {
  background-color: #5f768a;
  text-align:left;
  color:#FFFFFF
}
</style>
</head>
<body>
<table class="tb1">
  <tr>
    <td class="td1">SAP_ID</td>
    <td>DynamicContent1</td>
  </tr>
  <tr>
    <td class="td1">Passenger</td>
    <td>DynamicContent2</td>
  </tr>
  <tr>
    <td class="td1">Employer</td>
    <td>DynamicContent3</td>
  </tr>
  <tr>
    <td class="td1">Department</td>
    <td>DynamicContent4</td>
  </tr>
  <tr>
    <td class="td1">Leader</td>
    <td>DynamicContent5</td>
  </tr>
</table>
</body>
</html>

vyujincuimsft_1-1659080922728.png

vyujincuimsft_2-1659080937189.png

vyujincuimsft_3-1659081026214.png

Result Screenshot:

vyujincuimsft_0-1659080863562.png

In addition, here is a similar case for your reference.

https://powerusers.microsoft.com/t5/General-Power-Automate/How-to-send-email-with-Tabular-Looks-of-t...

 

 

Best Regards,
Charlie Choi

View solution in original post

8 REPLIES 8
SimonSmith84
Helper II
Helper II

Hi Tara, 

 

I think this is more to do with your CSS/HTML than it is to do with Power Automate itself. My HTML is a bit rusty, but I believe you can get the desired outcome by defining the first cell in each row as a table header, like this:

 

<table>
<tr>
<th>SAP ID</th>
<td>909988</td>
</tr>
<tr>
<th>Passenger</th>
<td>Joe Blogs</td>
</tr>
<tr>
<th>Employer</th>
<td>Best Jobs</td>
</tr>

ETC ETC
</table>

 

This would output your table like this:

SimonSmith84_0-1658824142898.png

 

 

tarastanhope
Frequent Visitor

Hi Simon,

Thank you but I don't thin that is doable...?

tarastanhope_0-1658836297344.png

 

SimonSmith84
Helper II
Helper II

Hi Tara, 

 

Yep, you're right. It's not a feature that's enabled in Power Automate to allow you to create HTML Tables the 'other' way around. 

 

Presumably it's only ever going to be a 1 row table? You could use the Code View in your 'Send an Email' Step and then create the table within the email rather than with the compose action? You can insert the dynamic content as you have in your 'Create HTML table Passenger' directly into the html code you've input into the email. 

 

<table>
<tr>
<th>SAP ID</th>
<td>'Passenger SAP'</td>
</tr>
<tr>
<th>Passenger</th>
<td>'Passenger Name'</td>
</tr>
<tr>
<th>Employer</th>
<td>'Employer'</td>
</tr>

ETC ETC
</table>

 

It's not ideal, and I've not had the time to actually test this and see if it works, but it's the only workaround I can think of!

tarastanhope
Frequent Visitor

HI Simon, I had thought of this but I can't see how to do this either. It's limited also a bit messy for someone with html knowledge to maintain.

tarastanhope
Frequent Visitor

I was wondering if I have my terminology wrong, should I be looking a list or a different term for a sideways table. It would only be 2 coloums, the headers and the answer / response.

Hi Tara, 

 

I think specifically for the visuals you're after, there isn't a simple way of doing this other than inputting the HTML into the email. Had an interesting read around using the 'rotate' property in CSS, but I can't get my head around it well enough to make it of use in this scenario. 

 

Sorry, but I'm out of ideas!

v-yujincui-msft
Community Support
Community Support

Hi @tarastanhope ,

 

I agree with what @SimonSmith84 said, you could try to built the HTML code from scratch instead of use the 'Create HTML table' Action.

 

I have made a simple test for your reference.

<!DOCTYPE html>
<html>
<head>
<style>
table.tb1 {
  border: 1px solid #1C6EA4;
  text-align: left;
  border-collapse: collapse;
}
table.tb1 td, table.tb1 th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.tb1 td {
  width: 25%;
}	
.td1 {
  background-color: #5f768a;
  text-align:left;
  color:#FFFFFF
}
</style>
</head>
<body>
<table class="tb1">
  <tr>
    <td class="td1">SAP_ID</td>
    <td>DynamicContent1</td>
  </tr>
  <tr>
    <td class="td1">Passenger</td>
    <td>DynamicContent2</td>
  </tr>
  <tr>
    <td class="td1">Employer</td>
    <td>DynamicContent3</td>
  </tr>
  <tr>
    <td class="td1">Department</td>
    <td>DynamicContent4</td>
  </tr>
  <tr>
    <td class="td1">Leader</td>
    <td>DynamicContent5</td>
  </tr>
</table>
</body>
</html>

vyujincuimsft_1-1659080922728.png

vyujincuimsft_2-1659080937189.png

vyujincuimsft_3-1659081026214.png

Result Screenshot:

vyujincuimsft_0-1659080863562.png

In addition, here is a similar case for your reference.

https://powerusers.microsoft.com/t5/General-Power-Automate/How-to-send-email-with-Tabular-Looks-of-t...

 

 

Best Regards,
Charlie Choi

tarastanhope
Frequent Visitor

Thank you Charlie, this worked a treat. Much appreciated.

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Users online (1,613)