Search code examples
c#html.netvisual-studiohtml-email

HTML table not formatting properly in C#

I'm developing an API in .NET with C#. I'm trying to send Emails with a proper format (when a delegation rule assigned to a particular user.)

This is the code block I've tried so far. 

            strings.Add("email_delegation_rule_assigned", "Delegation rule assigned ");
            strings.Add("email_delegation_rule_assigned_body",
                "Hi {senderName},<br/><br/>"
                + "The following Workflow Request/s have been submitted for your approval, in the absence of {assignerUserName} from {delegateFromDate} to {delegateFromTo}.<br/><br/>"
                + "<style>table, th, td {border: 1px solid black; }</style>"
                + "<style>th {background-color:#73c1e1; }</style>"
                + "<table>" +
                "<tr>" +
                "<th> Delegation Req# </th>" +
                "<th>Delegation<table><tr><td>From User</td><td>To User</td></tr></table></th>" +
                "<th>Effective Period<table><tr><td> From </td><td> To </td></tr></table></th>" +
                "<th> List of Workflows </th>" +
                "</tr>" +
                "<tr>" +
                "<td>1</td>" +
                "<td><table><tr><td> {assignerUserName} </td><td> You </td></tr></table></td>" +
                "<td><table><tr><td>{delegateFromDate}</td><td>{delegateFromTo}</td></tr></table></td>" +
                "<td>{workflowName}</td>" +
                "</tr>" +
                "</table><br/><br/>" +
                "For further information please contact<br/><br/>" +
                "You can view the Delegation details by clicking on the link below, using Flowdoh Workspace/Form Designer<br/><br/>" +
                "Thank you!<br/>" +
                "Warm Regards,<br/>" +
                "Enadoc Team<br/><br/>"
                );

I'm getting Emails in this format, which is a wrong format.

enter image description here

my Emails should look like this...

enter image description here

How can I properly align lines when divide a single column into two columns? The th column doesn't align with the td values. ..and I need to have single lines in the table. (ignore background colors in headers)

Please help me out. I really appreciate your responses. Thank u in advance!

Solution

  • You need to use colspan and rowspan attributes instead of separate tables to do your layout. Here is an example

    <style>table, th, td {border: 1px solid black; }</style>
<style>th {background-color:#73c1e1; }</style>
<table>
  <tr>
    <th rowspan="2"> Delegation Req# </th>
    <th colspan="2">Delegation</th>
    <th colspan="2">Effective Period</th>
    <th rowspan="2"> List of Workflows </th>
  </tr>
  <tr>
    <th>From User</th><th>To User</th>
    <th>From</th><th>To</th>
  </tr>
  <tr>
    <td>1</td>
    <td>{assignerUserName}</td>
    <td> You </td>
    <td>{delegateFromDate}</td>
    <td>{delegateFromTo}</td>
    <td>{workflowName}</td>
  </tr>
</table>

    enter image description here

    https://jsfiddle.net/cx58syn0/