Solved: Re: How to send email with Tabular Looks of the ou...

MIA27 · ‎07-24-2022

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

v-yujincui-msft · ‎07-27-2022

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

View solution in original post

v-yujincui-msft · ‎07-28-2022

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

View solution in original post

v-yujincui-msft · ‎07-29-2022

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

View solution in original post

v-yujincui-msft · ‎07-31-2022

Hi @MIA27 ,

Your HTML Code looks fine.

In addition, do you want to improve the readability of your code in your post? If so, you could paste the code in the code box.

<!DOCTYPE html>
<html>
<head>
<style>

Best Regards,
Charlie Choi

View solution in original post

v-yujincui-msft · ‎07-31-2022

Hi @MIA27 ,

Here are some links that might help you:

https://www.w3schools.com/html/html_tables.asp

https://www.w3schools.com/html/html_css.asp

https://www.w3schools.com/html/html_styles.asp

https://www.w3schools.com/html/html_classes.asp

Best Regards,
Charlie Choi

View solution in original post

Hardesh15 · ‎07-25-2022

@MIA27 Use this style-

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

@Hardesh /Gopenly.in

MIA27 · ‎07-25-2022

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

v-yujincui-msft · ‎07-27-2022

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

MIA27 · ‎07-28-2022

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:

v-yujincui-msft · ‎07-28-2022

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 · ‎07-28-2022

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.

v-yujincui-msft · ‎07-29-2022

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

MIA27 · ‎07-29-2022

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

MIA27 · ‎07-30-2022

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:

MIA27 · ‎07-30-2022

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.

v-yujincui-msft · ‎07-31-2022

Hi @MIA27 ,

Your HTML Code looks fine.

In addition, do you want to improve the readability of your code in your post? If so, you could paste the code in the code box.

<!DOCTYPE html>
<html>
<head>
<style>

Best Regards,
Charlie Choi

MIA27 · ‎07-31-2022

Dear Charlie,

Thank you so much for your review and advise, which is helping to learn more.

I applied the code in my project.

Can you please guide any link where I can learn more about the html related to table.

I saw some, formatting of tables is also there.

But from you I learn the declaration of class and then linking it later in the lower code.

Was looking, some tutorials links, where these types code with example are there, this will help me to learn more and understand each lines of the code before writing.

Thanking you once for time.

Best regards