-1

I'm new to this field.

I have a table in an Excel file (xlsx). Using C#, I save it as html: 

`worksheet.SaveToHtml("the html file path destination");`

Then I read the html file: 

`String htmlCode = File.ReadAllText("the html file path", Encoding.Default);`

Then I just put it to the email body like this: 

mail.Body = "<BR/><font size=2 ...." + htmlCode + ".... </body>";

The table is supposed to look this way:

the desired (how it looks in Excel and WLM)

But when the email is opened in Outlook, it looks like this:

how it looks in Outlook

The columns are significantly smaller in width.
How to fix this? I don't want to directly code the html in the C#.

UPDATE
This is how the html using WorkSheet.SaveToHtml looks like. I need to find what to change/add to make this table look right in Outlook.

<html>
  <head>
    <style type="text/css">table{border-collapse:collapse;table-layout:fixed;border-spacing:0;empty-cells:show}
.X0{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-top-color:000000;border-top-style:solid;border-top-width:2;border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X1{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-right-style:solid;border-right-width:2;border-right-color:000000;border-top-color:000000;border-top-style:solid;border-top-width:2;border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X2{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-top-color:000000;border-top-style:solid;border-top-width:2;border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X3{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-bottom-style:solid;border-bottom-width:2;border-bottom-color:000000;border-top-color:000000;border-top-style:solid;border-top-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X4{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X5{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(218,238,243);border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;font-weight:bold;vertical-align:center;text-align:center;word-wrap:break-word;height:21;}
.X6{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(255,255,255);border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-left-color:000000;border-left-style:solid;border-left-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;vertical-align:center;text-align:general;word-wrap:break-word;height:21;}
.X7{color:rgb(0,32,96);font-family:Calibri;font-size:11pt;background-color:rgb(255,255,255);border-bottom-color:000000;border-bottom-style:solid;border-bottom-width:2;border-right-color:000000;border-right-style:solid;border-right-width:2;vertical-align:center;text-align:right;word-wrap:break-word;height:21;}</style>
  </head>
  <body>
    <table cellspacing="0">
      <Col width="167" />
      <Col width="109" />
      <Col width="104" />
      <Col width="91" />
      <Col width="85" />
      <Col width="65" />
      <tr>
        <td class="X0">
          <div style="width:163px !Important;width:167px;" />
        </td>
        <td COLSPAN="2" class="X1">11&nbsp;11&nbsp;11</td>
        <td ROWSPAN="2" class="X3">11&nbsp;&nbsp;11</td>
        <td COLSPAN="2" class="X1">11&nbsp;11</td>
      </tr>
      <tr>
        <td class="X4">
          <div style="width:163px !Important;width:167px;" />
        </td>
        <td class="X5">11</td>
        <td class="X5">11</td>
        <td class="X5">11</td>
        <td class="X5">11</td>
      </tr>
      <tr>
        <td class="X6">a&nbsp;aa</td>
        <td class="X7">b</td>
        <td class="X7">b</td>
        <td class="X7">b</td>
        <td class="X7">b</td>
        <td class="X7">b</td>
      </tr>
      <tr>
        <td class="X6">c&nbsp;cc&nbsp;ccc</td>
        <td class="X7">d</td>
        <td class="X7">d</td>
        <td class="X7">d</td>
        <td class="X7">d</td>
        <td class="X7">d</td>
      </tr>
      <tr>
        <td class="X6">e&nbsp;ee&nbsp;eee</td>
        <td class="X7">f</td>
        <td class="X7">f</td>
        <td class="X7">f</td>
        <td class="X7">1f</td>
        <td class="X7">f</td>
      </tr>
    </table>
  </body>
</html>
Syfer
  • 4,262
  • 3
  • 20
  • 37
Albert
  • 119
  • 7
  • 1
    That's probably just the nature of how they render html. I'd be surprised if you have any direct control over that. – gilliduck Sep 19 '18 at 01:33
  • @mjwills gilliduck Thanks for the comments. Those links don't resolve my problem. I just tried using Interop Excel to save the Excel file to html using xls.SaveAs("html file path", Microsoft.Office.Interop.Excel.XlFileFormat.xlHtml); But when I put the html file to email body it doesn't show anything. – Albert Sep 19 '18 at 03:01
  • `But when I put the html file to email body it doesn't show anything` `The columns are significantly smaller in width.` I am struggling to reconcile those two statements. Are you experiencing the first issue? Or the second? – mjwills Sep 19 '18 at 06:03
  • @mjwills my first statement in your comment was when I used another type of html-save (XlFileFormat.xlHtml). I tried to use that, and now I'm back to using SaveToHtml. So now the problem is with the smaller width. Sorry for the confusion. – Albert Sep 19 '18 at 06:11
  • 2
    Regardless, the short answer is this - you can't save as HTML and send it as a HTML email and expect it to render nicely in Outlook. This is because Outlook does a generally poor job in html email rendering. https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients . _Unless you specifically generate the HTML yourself, and are an expert in generating HTML that Outlook will render correctly, then there is no easy solution here._ – mjwills Sep 19 '18 at 07:37

1 Answers1

0

Thanks for all the comments.
I finally got the desired table in Outlook using Save As in Excel. Save as type Web Page (htm, html). Both htm and html work.
But by default the table align was center. I just need to change it to left and everything's perfect.

Here's the html table that renders correctly in both Outlook and WLM (I haven't tested it in other email) 

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">

<head>
  <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
  <meta name=ProgId content=Excel.Sheet>
  <meta name=Generator content="Microsoft Excel 14">
  <link rel=File-List href="tabel_transaksi_saham_copy_files/filelist.xml">
  <style id="tabel_transaksi_saham_copy_879_Styles">
    <!--table {
      mso-displayed-decimal-separator: "\.";
      mso-displayed-thousand-separator: "\,";
    }
    
    .xl15879 {
      padding-top: 1px;
      padding-right: 1px;
      padding-left: 1px;
      mso-ignore: padding;
      color: black;
      font-size: 11.0pt;
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      font-family: Calibri, sans-serif;
      mso-font-charset: 0;
      mso-number-format: General;
      text-align: general;
      vertical-align: bottom;
      mso-background-source: auto;
      mso-pattern: auto;
      white-space: nowrap;
    }
    
    .xl63879 {
      padding-top: 1px;
      padding-right: 1px;
      padding-left: 1px;
      mso-ignore: padding;
      color: #002060;
      font-size: 11.0pt;
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      font-family: Calibri, sans-serif;
      mso-font-charset: 0;
      mso-number-format: General;
      text-align: center;
      vertical-align: middle;
      border: 1.0pt solid windowtext;
      background: #DAEEF3;
      mso-pattern: black none;
      white-space: normal;
    }
    
    .xl64879 {
      padding-top: 1px;
      padding-right: 1px;
      padding-left: 1px;
      mso-ignore: padding;
      color: #002060;
      font-size: 11.0pt;
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      font-family: Calibri, sans-serif;
      mso-font-charset: 0;
      mso-number-format: General;
      text-align: center;
      vertical-align: middle;
      border-top: none;
      border-right: 1.0pt solid windowtext;
      border-bottom: 1.0pt solid windowtext;
      border-left: 1.0pt solid windowtext;
      background: #DAEEF3;
      mso-pattern: black none;
      white-space: normal;
    }
    
    .xl65879 {
      padding-top: 1px;
      padding-right: 1px;
      padding-left: 1px;
      mso-ignore: padding;
      color: #002060;
      font-size: 11.0pt;
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      font-family: Calibri, sans-serif;
      mso-font-charset: 0;
      mso-number-format: General;
      text-align: center;
      vertical-align: middle;
      border-top: none;
      border-right: 1.0pt solid windowtext;
      border-bottom: 1.0pt solid windowtext;
      border-left: none;
      background: #DAEEF3;
      mso-pattern: black none;
      white-space: normal;
    }
    
    .xl66879 {
      padding-top: 1px;
      padding-right: 1px;
      padding-left: 1px;
      mso-ignore: padding;
      color: #002060;
      font-size: 11.0pt;
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      font-family: Calibri, sans-serif;
      mso-font-charset: 0;
      mso-number-format: General;
      text-align: general;
      vertical-align: middle;
      border-top: none;
      border-right: 1.0pt solid windowtext;
      border-bottom: 1.0pt solid windowtext;
      border-left: 1.0pt solid windowtext;
      mso-background-source: auto;
      mso-pattern: auto;
      white-space: normal;
    }
    
    .xl67879 {
      padding-top: 1px;
      padding-right: 1px;
      padding-left: 1px;
      mso-ignore: padding;
      color: #002060;
      font-size: 11.0pt;
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      font-family: Calibri, sans-serif;
      mso-font-charset: 0;
      mso-number-format: General;
      text-align: center;
      vertical-align: middle;
      border-top: 1.0pt solid windowtext;
      border-right: none;
      border-bottom: 1.0pt solid windowtext;
      border-left: 1.0pt solid windowtext;
      background: #DAEEF3;
      mso-pattern: black none;
      white-space: normal;
    }
    
    .xl68879 {
      padding-top: 1px;
      padding-right: 1px;
      padding-left: 1px;
      mso-ignore: padding;
      color: #002060;
      font-size: 11.0pt;
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      font-family: Calibri, sans-serif;
      mso-font-charset: 0;
      mso-number-format: General;
      text-align: center;
      vertical-align: middle;
      border-top: 1.0pt solid windowtext;
      border-right: 1.0pt solid windowtext;
      border-bottom: 1.0pt solid windowtext;
      border-left: none;
      background: #DAEEF3;
      mso-pattern: black none;
      white-space: normal;
    }
    
    .xl69879 {
      padding-top: 1px;
      padding-right: 1px;
      padding-left: 1px;
      mso-ignore: padding;
      color: #002060;
      font-size: 11.0pt;
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      font-family: Calibri, sans-serif;
      mso-font-charset: 0;
      mso-number-format: General;
      text-align: center;
      vertical-align: middle;
      border-top: 1.0pt solid windowtext;
      border-right: 1.0pt solid windowtext;
      border-bottom: none;
      border-left: 1.0pt solid windowtext;
      background: #DAEEF3;
      mso-pattern: black none;
      white-space: normal;
    }
    
    -->
  </style>
</head>

<body>
  <!--[if !excel]>&nbsp;&nbsp;<![endif]-->
  <!--The following information was generated by Microsoft Excel's Publish as Web
Page wizard.-->
  <!--If the same item is republished from Excel, all information between the DIV
tags will be replaced.-->
  <!----------------------------->
  <!--START OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD -->
  <!----------------------------->

  <div id="tabel_transaksi_saham_copy_879" align=left x:publishsource="Excel">

    <table border=0 cellpadding=0 cellspacing=0 width=615 style='border-collapse:
 collapse;table-layout:fixed;width:462pt'>
      <col width=166 style='mso-width-source:userset;mso-width-alt:6070;width:125pt'>
      <col width=108 style='mso-width-source:userset;mso-width-alt:3949;width:81pt'>
      <col width=103 style='mso-width-source:userset;mso-width-alt:3766;width:77pt'>
      <col width=90 style='mso-width-source:userset;mso-width-alt:3291;width:68pt'>
      <col width=84 style='mso-width-source:userset;mso-width-alt:3072;width:63pt'>
      <col width=64 style='width:48pt'>
      <tr height=21 style='height:15.75pt'>
        <td height=21 class=xl63879 width=166 style='height:15.75pt;width:125pt'>&nbsp;</td>
        <td colspan=2 class=xl67879 width=211 style='border-right:1.0pt solid black;
  border-left:none;width:158pt'>11</td>
        <td rowspan=2 class=xl69879 width=90 style='border-bottom:1.0pt solid black;
  width:68pt'>11</td>
        <td colspan=2 class=xl67879 width=148 style='border-right:1.0pt solid black;
  border-left:none;width:158pt'>11</td>
      </tr>
      <tr height=21 style='height:15.75pt'>
        <td height=21 class=xl64879 width=166 style='height:15.75pt;width:125pt'>&nbsp;</td>
        <td class=xl65879 width=108 style='width:81pt'>11</td>
        <td class=xl65879 width=103 style='width:77pt'>11</td>
        <td class=xl65879 width=84 style='width:63pt'>11</td>
        <td class=xl65879 width=64 style='width:48pt'>11</td>
      </tr>
      <tr height=21 style='height:15.75pt'>
        <td height=21 class=xl66879 align=right width=166 style='height:15.75pt;
  width:125pt'>11</td>
        <td class=xl66879 align=right width=108 style='border-left:none;width:81pt'>11</td>
        <td class=xl66879 align=right width=103 style='border-left:none;width:77pt'>11</td>
        <td class=xl66879 align=right width=90 style='border-left:none;width:68pt'>11</td>
        <td class=xl66879 align=right width=84 style='border-left:none;width:63pt'>11</td>
        <td class=xl66879 align=right width=64 style='border-left:none;width:48pt'>11</td>
      </tr>
      <tr height=21 style='mso-height-source:userset;height:15.75pt'>
        <td height=21 class=xl66879 align=right width=166 style='height:15.75pt;
  width:125pt'>11</td>
        <td class=xl66879 align=right width=108 style='border-left:none;width:81pt'>11</td>
        <td class=xl66879 align=right width=103 style='border-left:none;width:77pt'>11</td>
        <td class=xl66879 align=right width=90 style='border-left:none;width:68pt'>11</td>
        <td class=xl66879 align=right width=84 style='border-left:none;width:63pt'>11</td>
        <td class=xl66879 align=right width=64 style='border-left:none;width:48pt'>11</td>
      </tr>
      <tr height=21 style='height:15.75pt'>
        <td height=21 class=xl66879 align=right width=166 style='height:15.75pt;
  width:125pt'>11</td>
        <td class=xl66879 align=right width=108 style='border-left:none;width:81pt'>11</td>
        <td class=xl66879 align=right width=103 style='border-left:none;width:77pt'>11</td>
        <td class=xl66879 align=right width=90 style='border-left:none;width:68pt'>11</td>
        <td class=xl66879 align=right width=84 style='border-left:none;width:63pt'>11</td>
        <td class=xl66879 align=right width=64 style='border-left:none;width:48pt'>11</td>
      </tr>
      <![if supportMisalignedColumns]>
      <tr height=0 style='display:none'>
        <td width=166 style='width:125pt'></td>
        <td width=108 style='width:81pt'></td>
        <td width=103 style='width:77pt'></td>
        <td width=90 style='width:68pt'></td>
        <td width=84 style='width:63pt'></td>
        <td width=64 style='width:48pt'></td>
      </tr>
      <![endif]>
    </table>

  </div>


  <!----------------------------->
  <!--END OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD-->
  <!----------------------------->
</body>

</html>
Albert
  • 119
  • 7