web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id :
Power Automate - General Discussion
Answered

How to send email with Tabular Looks of the output

(0) ShareShare
ReportReport
Posted on by

I am trying to export the records of the Sharepoint list , when an item is created or modified , the output result is ok but the output data format is not looking, I need the looks as below:

 

MIA27_2-1658660040685.png

 

I used the below Html code , which I found from website search

<style>
Table {
font-family: Arial, Helvetica, sans-serif;
background-color: #EEEEEE;
border-collapse: collapse;
width: 100%;
}
Table td, Table th {
border: 1px solid #ddd;
padding: 3px 3px;
}
Table th {
font-size: 15px;
font-weight: bold;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #1C6EA4;
color: white;
}
</style>

 

But it not formatting properly and also it is getting mess with my auto signature

 

My Flow is as below:

 

 

MIA27_1-1658659869642.png

 

Kindly check and advise

 

 

 

I have the same question (0)
  • Hardesh15 Profile Picture
    7,087 Super User 2024 Season 1 on at
    Re: How to send email with Tabular Looks of the output

    @MIA27  Use this style-

    <style>
    Table {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #EEEEEE;
    border-collapse: collapse;
    }
    Table td, Table th {
    border: 1px solid #ddd;
    padding: 3px 3px;
    text-align: center;
    }
    Table th {
    font-size: 15px;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 12px;
    }
    </style>

    Please 'Thumbs Up' the posts that helped you and 'Accept as Solution' if my post answered your question.

    @Hardesh /Gopenly.in

  • MIA27 Profile Picture
    on at
    Re: How to send email with Tabular Looks of the output

    Dear Mr. Haresh,

    Thank you for your reply.

    In my situation it is not getting applied.

     

    Reason what I can understand that code is ok, but for me as the my IT people has set up auto signature which is creating the mess of my email, the code is trying to format the signature section also.

     

    Therefore, change the plan and send the records one by one. 

    so applied the below method, 

     

    Is it possible to format the below email style, if yes please guide

     

    MIA27_0-1658771566197.png

     

    My current requirement will be as below

     

    MIA27_1-1658771686952.png

     

  • Verified answer
    v-yujincui-msft Profile Picture
    on at
    Re: How to send email with Tabular Looks of the output

    Hi @MIA27 ,

     

    Do you want to generate a multi-row, two-column HTML table with borders based on the current item and send it by email?

     

    I have made a simple test for your reference.

     

    Here is my Flow.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table {
     border: 1px solid #1C6EA4;
     background-color: #EEEEEE;
     width: 100%;
     text-align: left;
     border-collapse: collapse;
    }
    table td, table th {
     border: 1px solid #AAAAAA;
     padding: 3px 2px;
    }
    td:nth-child(odd) {
     background-color: #dddddd;
    }
    </style>
    </head>
    <body>
    <table>
     <tr>
     <td>ColumnName1</td>
     <td>DynamicContent1</td>
     </tr>
     <tr>
     <td>ColumnName2</td>
     <td>DynamicContent2</td>
     </tr>
     <tr>
     <td>ColumnName3</td>
     <td>DynamicContent3</td>
     </tr>
     <tr>
     <td>ColumnName4</td>
     <td>DynamicContent4</td>
     </tr>
     <tr>
     <td>ColumnName5</td>
     <td>DynamicContent5</td>
     </tr>
    </table>
    </body>
    </html>

    vyujincuimsft_0-1658988775779.png

    vyujincuimsft_1-1658988823437.png

    Result Screenshot:

    vyujincuimsft_2-1658989018284.png

     

     

    Best Regards,
    Charlie Choi

  • MIA27 Profile Picture
    on at
    Re: How to send email with Tabular Looks of the output

    Dear Charlie,

     

    Thank you for your advise code, it worked, but it is applying the formatting on the signature also.

    Kindly below note in the image posted

    My IT teams has set the auto signature for every new email, which I cannot remove also to test it. 

    I dont want the format to be applied on the below signature and Also the width to be controlled as it is on the whole page, 

    Please guide how to solve both:

     

    MIA27_0-1659004879039.png

     

     

     

  • Verified answer
    v-yujincui-msft Profile Picture
    on at
    Re: How to send email with Tabular Looks of the output

    Hi @MIA27 ,

     

    Maybe you could try the following Codes. I used class attribute in code.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table.tb1 {
     border: 1px solid #1C6EA4;
     background-color: #EEEEEE; 
     text-align: left;
     border-collapse: collapse;
    }
    table.tb1 td, table.tb1 th {
     border: 1px solid #AAAAAA;
     padding: 3px 2px;
    }
    table.tb1 td {
     width: 25%;
    }	
    table.tb1 td:nth-child(odd) {
     background-color: #dddddd;
    }
    </style>
    </head>
    <body>
    <table class="tb1">
     <tr>
     <td>ColumnName1</td>
     <td>DynamicContent1</td>
     </tr>
     <tr>
     <td>ColumnName2</td>
     <td>DynamicContent2</td>
     </tr>
     <tr>
     <td>ColumnName3</td>
     <td>DynamicContent3</td>
     </tr>
     <tr>
     <td>ColumnName4</td>
     <td>DynamicContent4</td>
     </tr>
     <tr>
     <td>ColumnName5</td>
     <td>DynamicContent5</td>
     </tr>
    </table>
    </body>
    </html>

     

     

    Best Regards,
    Charlie Choi

  • MIA27 Profile Picture
    on at
    Re: How to send email with Tabular Looks of the output

    Dear Charlie,

     

    Thank you so much,

    it worked. Below is the image of the output in email. For testing I only inserted the Dynamic field only.

     

    But One additional advise to show perfection in the output and learn more (which will help me to apply in other flows also), Is it possible to put border and font colors in the output as it not good readable and getting mixed.

     

    Current output in email

    MIA27_0-1659069934312.png

     

    Required is the below output to bring good looks (some formatting also please note background color, font color, allignement etc)

     

    MIA27_2-1659070358287.png

     

     

    Best Regards.

     

  • Verified answer
    v-yujincui-msft Profile Picture
    on at
    Re: How to send email with Tabular Looks of the output

    Hi @MIA27 ,

     

    The HTML table generated by the code I provided earlier should have borders. in addition, here is the latest code:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table.tb1 {
     border: 1px solid #1C6EA4;
     background-color: #EEEEEE; 
     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: #1C6EA4;
     text-align:center;
     color:#FFFFFF
    }
    </style>
    </head>
    <body>
    <table class="tb1">
     <tr>
     <td class="td1">ID</td>
     <td>TestValue1</td>
     </tr>
     <tr>
     <td class="td1">Title</td>
     <td>TestValue2</td>
     </tr>
     <tr>
     <td class="td1">Product Description</td>
     <td>TestValue3</td>
     </tr>
     <tr>
     <td class="td1">Qty</td>
     <td>TestValue4</td>
     </tr>
     <tr>
     <td class="td1">Status</td>
     <td>TestValue5</td>
     </tr>
    </table>
    </body>
    </html>

    Result Screenshot:

    vyujincuimsft_1-1659079407522.png

     

     

    Best Regards,

    Charlie Choi

  • MIA27 Profile Picture
    on at
    Re: How to send email with Tabular Looks of the output

    I copied the complete final code from your last posting, I tested the code, all the fine other than border, no border, but in image border is there. 

     

    MIA27_0-1659095097785.png

    please advise which line to revise, so that the border can appear.

     

    Regards

     

  • MIA27 Profile Picture
    on at
    Re: How to send email with Tabular Looks of the output

    Dear Charlie,

     

    Further to not 100% result, started tested and adding lines. As I am very new to this coding, after making mess codes, found the below code worked and brought the result as I wanted.

    But I am fully sure, that I have added few extra lines which may can be revised to be better.

    The additional method I applied, that I added one more class .td2 as you did to capture the value of column related rows and some padding code as well. Not sure If I am ok and there will no further code failure later.

     

    Requesting you to review my code and advise me,  it help me to learn and use in further need.

     

    Applied code is as below :

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table.tb1 {
      border: 1px solid #1C6EA4;
      background-color: #B2B2B2; 
      text-align: left;
     
    font-size:15px;
    font-family:calibri;
    padding: 3px 2px;
    }
    table.tb1 td, table.tb1 th {
      border: 1px solid #1C6EA4;
      padding: 3px 2px;
    }
    table.tb1 td {
      width: 25%;
    }       
    .td1 {
      background-color: #1C6EA4;
      text-align:center;
      color:#FFFFFF
    }
    .td2 {
      background-color: rgb(255,255,255);
      text-align:left;
      color:Black
    }
    </style>
    </head>
    <body>
    <table class="tb1">
      <tr>
        <td class="td1">FormNo       :</td>
        <td class="td2">TestValue1</td>
      </tr>
      <tr>
        <td class="td1">Model          :</td>
        <td class="td2">TestValue2</td>
      </tr>
      <tr>
        <td class="td1">SerialNo      :</td>
        <td class="td2">TestValue3</td>
      </tr>
      <tr>
        <td class="td1">ProdType    :</td>
        <td class="td2">TestValue4</td>
      </tr>
      <tr>
        <td class="td1">AssetNo      :</td>
        <td class="td2">TestValue5</td>
      </tr>
    </table>
    </body>
    </html>

     

     

    The result is as below:

    MIA27_0-1659179994355.png

     

  • MIA27 Profile Picture
    on at
    Re: How to send email with Tabular Looks of the output

    sorry,

    I added to my reply to earlier reply.

    Should I clicked on your post to reply.

    anyhow, please check the trailing post and advise.

     

    Also plls. advise where to type these codes when copied and pasted in compose it remains same colors coding, same as yours. 

     

    Best regards.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Chiara Carbone – Community Spotlight

We are honored to recognize Chiara Carbone as our Community Spotlight for November…

Leaderboard > Power Automate

#1
Michael E. Gernaey Profile Picture

Michael E. Gernaey 614 Super User 2025 Season 2

#2
Tomac Profile Picture

Tomac 401 Moderator

#3
chiaraalina Profile Picture

chiaraalina 282

Last 30 days Overall leaderboard