CODEWITHSUNDEEP
htmlcssexcelemail
Filling The Stack is What I DO
Filling The Stack is What I DO

Reputation: 6741

How to format an html table for email

I've got an area on my site that the user can upload an excel file and it gets processed on the server. At the same time while processing the excel file into a data-table the program is building a report to return to the user to let them know what parts we're successfully added and which ones did not get added.

What I'm doing is emailing the report and displaying the report on screen in a popup so that the user can get an instant look at what parts got added and what parts were rejected.

The formatting for the report looks fine on screen but in the email it look not so good.

Can someone over look this code and tell me how to inline my styling so that it looks good in emails as well?

--The Code--

static async Task<string> BuildTableReportAsync(DataTable dt, string caption)
{
    return await Task.Run(() =>
      {
          StringBuilder sb = new StringBuilder();
          sb.Append("<html><body><table class='reportWrapperTable' cellspacing='0'cellpadding='4' rules='rows' style='color:#1f2240;background-color:#ffffff'><thead style='100%;color:#ffffff;background-color:#1f2240;font-weight:bold'><tr>");
          foreach (DataColumn c in dt.Columns)
          {
              sb.AppendFormat("<th scope='col'>{0}</th>", c.ColumnName);
          }
          sb.AppendLine("</tr></thead><caption style='background-color:#ffffff;color:#1f2240;,margin-bottom:1em;font-size:18pt;width:100%;border:0'>" + caption + "</caption><tbody>");
          foreach (DataRow dr in dt.Rows)
          {
              sb.Append("<tr>");
              foreach (object o in dr.ItemArray)
              {
                  sb.AppendFormat("<td>{0}</td>", HttpUtility.HtmlEncode(o.ToString()));
              }
              sb.AppendLine("</tr>");
          }
          sb.AppendLine("</tbody></table></body></html>");
          dt.Dispose();
          return sb.ToString();
      });
}

--The first snap shot result when viewing the table in an browser--

--The second snap shot result when viewing the table in an email. This is the one that the header and the caption looks bad on.--

On Screen Browser View

Email View

Here is the HTML CODE

<table class="reportWrapperTable" cellspacing="0" cellpadding="4" rules="rows" style="color:#1f2240;background-color:#ffffff"><thead style="100%;color:#ffffff;background-color:#1f2240;font-weight:bold"><tr><th scope="col">Number</th><th scope="col">Name</th><th scope="col">Length</th><th scope="col">Width</th><th scope="col">Height</th><th scope="col">PackageQty</th><th scope="col">UnitMeasure</th><th scope="col">Cost</th><th scope="col">Profile</th><th scope="col">Category</th></tr></thead><caption style="background-color:#ffffff;color:#1f2240;,margin-bottom:1em;font-size:18pt;width:100%;border:0">AlumCloud Parts Not Added Report</caption><tbody>
<tr><td>OB122</td><td>FR 2F OB OP S-CL F-B/FG400</td><td>0</td><td>75.5</td><td>85.75</td><td>1</td><td>Each</td><td></td><td>1 3/4 x 4</td><td>Door Frame (Package)</td></tr>
<tr><td>OB612</td><td>FR 1FT OB OP S-CL LOK/FG450</td><td>0</td><td>39.5</td><td>126</td><td>1</td><td>Each</td><td>0</td><td>1 3/4 x4 1/2</td><td>Door Frame (Package)</td></tr>
<tr><td>CD212</td><td>NS OP CAL 3' x 7' DO /BR 9.5</td><td>0</td><td>36</td><td>84</td><td>1</td><td>Each</td><td>0</td><td>N/A</td><td>Door Leaf(Package)</td></tr>
</tbody></table>

Upvotes: 0

Views: 20735

Answers (2)

John
John

Reputation: 12193

Here is a fluid example. Because you have so many columns a fixed table might work better - you can simply change out the % widths for fixed px widths and add as many columns as needed, making sure each row is the same. Just make sure the col widths always adds up to the width of the table.

Upvotes: 1

Filling The Stack is What I DO
Filling The Stack is What I DO

Reputation: 6741

It was the caption tag. I move the <caption> tag to be the first tag right after the <table> start tag.

<table class="reportWrapperTable" cellspacing="4" cellpadding="2" width="100%" rules="rows" style="border-collapse:collapse;color:#1f2240;background-color:#ffffff"><caption style="background-color:#ffffff;color:#1f2240;margin-bottom:.5em;font-size:18pt;width:100%;border:0">AlumCloud Parts Not Added Report</caption><thead style="100%;color:#ffffff;background-color:#1f2240;font-weight:bold"><tr><th scope="col" style="background-color:#1f2240">Number</th><th scope="col" style="background-color:#1f2240">Name</th><th scope="col" style="background-color:#1f2240">Length</th><th scope="col" style="background-color:#1f2240">Width</th><th scope="col" style="background-color:#1f2240">Height</th><th scope="col" style="background-color:#1f2240">PackageQty</th><th scope="col" style="background-color:#1f2240">UnitMeasure</th><th scope="col" style="background-color:#1f2240">Cost</th><th scope="col" style="background-color:#1f2240">Profile</th><th scope="col" style="background-color:#1f2240">Category</th></tr></thead><tbody>
<tr><td>OB122</td><td>FR 2F OB OP S-CL F-B/FG400</td><td>0</td><td>75.5</td><td>85.75</td><td>1</td><td>Each</td><td></td><td>1 3/4 x 4</td><td>Door Frame (Package)</td></tr>
<tr><td>OB612</td><td>FR 1FT OB OP S-CL LOK/FG450</td><td>0</td><td>39.5</td><td>126</td><td>1</td><td>Each</td><td>0</td><td>1 3/4 x4 1/2</td><td>Door Frame (Package)</td></tr>
<tr><td>CD212</td><td>NS OP CAL 3' x 7' DO /BR 9.5</td><td>0</td><td>36</td><td>84</td><td>1</td><td>Each</td><td>0</td><td>N/A</td><td>Door Leaf(Package)</td></tr>
</tbody></table>

Upvotes: 0

Related Questions