Search code examples
htmlcsshtml-tablenestedhtml-email

Email body content jumbled if report has nested tables in it


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 . what can i do so even email looks what i see in browsers ??

Below is HTML content if i send email as -body $html but i want it to be send out as -BodyasHtml INSTEAD.

<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

  • Below is an updated code which I have tried to fix. There were 3 issues in total (listed below), #2 and #3 were repeated a few times.

    1. tr closed twice after <td class="td4" >
    2. table with class1 had extra quotes which closed styles earlier then expected
    3. table with class1 were not closed off.

    <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>
    </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 % </span></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>
    <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 %</span></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>
    <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 % </span></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>
    <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 % </span></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>