htmlcssemailhtml-tablehtml-email
Email body contents get jumbled up if below html emailed
I am processing raw data with powershell then populating hash tables. Then i am generating report out of hash table. I am generating HTML file as a report. This HTML file looks well if i use any browser but if i send in email using option as -BodyasHtml $HTML content gets jumbled up .Below code has nested tables. what can i do so even email looks what i see in browsers ?? Below code was in email if i send email as -Body $HTML .
<html>
<head>
<style type="text/css">
caption { font-size: 1.5em; font-weight: 400; margin: 0; padding: 6px 0 8px; text-align: left;}
.table1 {border: 4px ;background:#cff;align:"center";cellpadding="0"; cellspacing="0";}
.table2 {border: 3px ; background:#E0F8AE;align:"left" ;cellpadding="20";cellspacing="0";}
.table3 {border: 4px ; background:#FFCAB1 ;align:"right";cellpadding="20" ;cellspacing="0";}
tr, td { font-size:16px; }
.content {width: 640px !important;}
td.fw {padding:25px 25px 25px 25px}
.th1 { border: solid 2px #ffffff; padding: 5px; background:#A6cb5b}
.th4 { border: solid 2px #ffffff; padding: 5px; background:#6DC7C7}
.th2 { border: solid 2px #ffffff; padding: 5px; background:#c7896b}
.th3 { border: solid 2px #ffffff; padding: 5px; background:#ECA583}
.td1 { border: solid 2px #ffffff; padding: 5px; }
.td2 { text-align: center; font-size: 1.5em; face:Tahoma; color:#D35400 ;}
.td3 { text-align: center; font-size: .5em; padding: 5px;color:#0000FF }
.td4 { text-align: center; font-size: .5em; padding: 5px;color:#D35400 }
</style>
<meta charset="utf-8">
<title> NestedTables </title>
</head>
<body >
<table width="100%" style="font-size: 15px;border-collapse: collapse;">
<tr>
<td class="td2">Daily Backup Summary Reports From ALL cluster</td>
</tr>
<tr>
<td class="td3" >Below report also available on NAS share : \\hcohesity05\cohesity_reports </td></tr>
<tr>
<td class="td4" >Contact Anil Maurya for any question/comments on this report. </td></tr>
</tr>
</table>
<table class="table1" style="margin-left:auto; margin-right:auto;width:"100%"; border: "4px solid green"; border-collapse: collapse;" >
<tr> <th colspan="2" class="th4"> Hcohesity01 Cluster Daily stats </th> </tr>
<tr> <! start of first row in main table >
<td > <! start of first cell in first row in main table >
<table class="table2"> <! start of top left table >
<tr> <th class="th1"> Cluster Parameter</th> <th class="th1"> Value </th> </tr>
<tr> <td class="td1"> Number of Backup Failure </td> <td class="td1"> 0 </td> </tr>
<tr> <td class="td1"> Total backup Jobs </td> <td class="td1"> 597 </td> </tr>
<tr> <td class="td1"> Total Front End backup size in TB </td> <td class="td1"> 15553.39 </td> </tr>
<tr> <td class="td1"> Over All backup success </td>
<td class="td1"><span style="color: #0000FF"> 100.00 % </td> </tr>
<tr> <td class="td1"> Cluster actual physical Size in TB</td> <td class="td1"> 384.81 </td> </tr>
<tr> <td class="td1"> Physical space consumed in TB </td> <td class="td1"> 179.07 </td> </tr>
<tr> <td class="td1"> Over All cluster Usage % </td> <td class="td1"> 46.53 %</td> </tr>
<tr> <td class="td1"> IBMCOS Usage in TB </td>
<td class="td1"> 141 </td> </tr>
<tr> <td class="td1"> IBMCOS Usage % </td>
<td class="td1"> 40.75 % </td> </tr>
</table>
</td>
<td>
<table class="table3">
<tr> <th class="th2" colspan="2"> Servers with Change Rate more than 10% </th> </tr> <! start of right top table >
<tr> <th class="th3"> Servers Name </th>
<th class="th3"> change Rate</th></tr>
<tr> <td class="td1" colspan="2"> No Server found. </td> </tr>
</table> </td> </tr>
<table class="table1" style="margin-left:auto; margin-right:auto;width:"100%"; border: "4px solid green"; border-collapse: collapse;" >
<tr> <th colspan="2" class="th4"> Hcohesity03 Cluster Daily stats </th> </tr>
<tr> <! start of first row in main table >
<td > <! start of first cell in first row in main table >
<table class="table2"> <! start of top left table >
<tr> <th class="th1"> Cluster Parameter</th> <th class="th1"> Value </th> </tr>
<tr> <td class="td1"> Number of Backup Failure </td> <td class="td1"> 0 </td> </tr>
<tr> <td class="td1"> Total backup Jobs </td> <td class="td1"> 325 </td> </tr>
<tr> <td class="td1"> Total Front End backup size in TB </td> <td class="td1"> 15494.36 </td> </tr>
<tr> <td class="td1"> Over All backup success </td>
<td class="td1"><span style="color: #0000FF"> 100.00 % </td> </tr>
<tr> <td class="td1"> Cluster actual physical Size in TB</td> <td class="td1"> 385.1 </td> </tr>
<tr> <td class="td1"> Physical space consumed in TB </td> <td class="td1"> 179.01 </td> </tr>
<tr> <td class="td1"> Over All cluster Usage % </td> <td class="td1"> 46.48 %</td> </tr>
<tr> <td class="td1"> IBMCOS Usage in TB </td>
<td class="td1"> 72 </td> </tr>
<tr> <td class="td1"> IBMCOS Usage % </td>
<td class="td1"> 45.57 % </td> </tr>
</table>
</td>
<td>
<table class="table3">
<tr> <th class="th2" colspan="2"> Servers with Change Rate more than 10% </th> </tr> <! start of right top table >
<tr> <th class="th3"> Servers Name </th>
<th class="th3"> change Rate</th></tr>
<tr> <td class="td1" colspan="2"> No Server found. </td> </tr>
</table> </td> </tr>
<table class="table1" style="margin-left:auto; margin-right:auto;width:"100%"; border: "4px solid green"; border-collapse: collapse;" >
<tr> <th colspan="2" class="th4"> Hcohesity04 Cluster Daily stats </th> </tr>
<tr> <! start of first row in main table >
<td > <! start of first cell in first row in main table >
<table class="table2"> <! start of top left table >
<tr> <th class="th1"> Cluster Parameter</th> <th class="th1"> Value </th> </tr>
<tr> <td class="td1"> Number of Backup Failure </td> <td class="td1"> 2 </td> </tr>
<tr> <td class="td1"> Total backup Jobs </td> <td class="td1"> 911 </td> </tr>
<tr> <td class="td1"> Total Front End backup size in TB </td> <td class="td1"> 2518.08 </td> </tr>
<tr> <td class="td1"> Over All backup success </td>
<td class="td1"><span style="color: #FF0000">99.78 % </td> </tr>
<tr> <td class="td1"> Cluster actual physical Size in TB</td> <td class="td1"> 446.23 </td> </tr>
<tr> <td class="td1"> Physical space consumed in TB </td> <td class="td1"> 95.26 </td> </tr>
<tr> <td class="td1"> Over All cluster Usage % </td> <td class="td1"> 21.35 %</td> </tr>
</table>
</td>
<td>
<table class="table3">
<tr> <th class="th2" colspan="2"> Servers with Change Rate more than 10% </th> </tr> <! start of right top table >
<tr> <th class="th3"> Servers Name </th>
<th class="th3"> change Rate</th></tr>
<tr> <td class="td1"> hwd00135.dev.hbcbs.local </td>
<td class="td1"> 23662 </td> </tr>
<tr> <td class="td1"> hwd00270.corpads.local </td>
<td class="td1"> 19 </td> </tr>
<tr> <td class="td1"> hwd00271.corpads.local </td>
<td class="td1"> 21.1 </td> </tr>
<tr> <td class="td1"> hwd00276.corpads.local </td>
<td class="td1"> 14.3 </td> </tr>
</table> </td> </tr>
<table class="table1" style="margin-left:auto; margin-right:auto;width:"100%"; border: "4px solid green"; border-collapse: collapse;" >
<tr> <th colspan="2" class="th4"> Hcohesity05 Cluster Daily stats </th> </tr>
<tr> <! start of first row in main table >
<td > <! start of first cell in first row in main table >
<table class="table2"> <! start of top left table >
<tr> <th class="th1"> Cluster Parameter</th> <th class="th1"> Value </th> </tr>
<tr> <td class="td1"> Number of Backup Failure </td> <td class="td1"> 0 </td> </tr>
<tr> <td class="td1"> Total backup Jobs </td> <td class="td1"> 442 </td> </tr>
<tr> <td class="td1"> Total Front End backup size in TB </td> <td class="td1"> 1289.94 </td> </tr>
<tr> <td class="td1"> Over All backup success </td>
<td class="td1"><span style="color: #0000FF"> 100.00 % </td> </tr>
<tr> <td class="td1"> Cluster actual physical Size in TB</td> <td class="td1"> 311.14 </td> </tr>
<tr> <td class="td1"> Physical space consumed in TB </td> <td class="td1"> 69.68 </td> </tr>
<tr> <td class="td1"> Over All cluster Usage % </td> <td class="td1"> 22.40 %</td> </tr>
</table>
</td>
<td>
<table class="table3">
<tr> <th class="th2" colspan="2"> Servers with Change Rate more than 10% </th> </tr> <! start of right top table >
<tr> <th class="th3"> Servers Name </th>
<th class="th3"> change Rate</th></tr>
<tr> <td class="td1" colspan="2"> No Server found. </td> </tr>
</table> </td> </tr>
</table>
</body>
</html>
=============================
Solution
I haven't used the powershell. But the general rule that you needs to follow for the email if I remember correctly, is that you need to provide inline css in HTML elements.
Its seems like you have a proper HTML. But you need to provide the inline css instead of internal css. So remove the class and instead add style in the HTML element. For example:
<td class="td1"> Total backup Jobs </td>
change to
<td style="border: solid 2px #ffffff; padding: 5px;"> Total backup Jobs </td>
Also make sure that you have the proper open and closing tags for each element. If you don't provide the closing tag for an element. Browser will handle it but email might won't.
I hope this helps.Thanks
P.S: If you provide the screenshot of the email that would be helpful as well.
I suppose to get like below in my email
- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome