Answered

How to send email with Tabular Looks of the output

(0) Share

Report

Posted on by MIA27

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:

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

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

My Flow is as below:

Kindly check and advise

I have the same question (0)

All responses (14)

Answers (5)

Hardesh15 7,087 Super User 2024 Season 1 on at

Like (0)

Report

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

Was this reply helpful? Yes No
MIA27 on at

Like (0)

Report

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

My current requirement will be as below

Was this reply helpful? Yes No
Verified answer

v-yujincui-msft on at

Like (1)

Report
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>

Result Screenshot:

Best Regards,
Charlie Choi

Was this reply helpful? Yes No
MIA27 on at

Like (0)

Report

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:

Was this reply helpful? Yes No
Verified answer

v-yujincui-msft on at

Like (1)

Report
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

Was this reply helpful? Yes No
MIA27 on at

Like (0)

Report

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

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

Best Regards.

Was this reply helpful? Yes No
Verified answer

v-yujincui-msft on at

Like (1)

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

Best Regards,

Charlie Choi

Was this reply helpful? Yes No
MIA27 on at

Like (0)

Report

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.

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

Regards

Was this reply helpful? Yes No

MIA27 on at

Like (0)

Report

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>

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

Was this reply helpful? Yes No

MIA27 on at

Like (0)

Report

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.

Was this reply helpful? Yes No