HTML table not formatting properly in C#

Question

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.

my Emails should look like this...

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!

Answer 1

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>

https://jsfiddle.net/cx58syn0/

Answer 2

It seems you need this one.

So HTML code would be

    <table border="1">
  <tr>
    <th scope="col" rowspan="2">Delegation Req#</th>
    <th scope="col" colspan="2">Delegation</th>
    <th scope="col" colspan="2">Effective Period</th>
    <th scope="col" rowspan="2">List of workflows</th>
  </tr>
  <tr>
    <td>From User</td>
    <td>To User</td>
    <td>From</td>
    <td>To</td>
  </tr>
  <tr>
    <th scope="row">1</th>
    <td>Admin</td>
    <td>You</td>
    <td>16/16/2020 18:30:00 PM (UTC)</td>
    <td>17/16/2020 18:30:00 PM (UTC)</td>
    <th scope="row">Workflow 06/15001</th>
  </tr>
   <tr>
    <th scope="row">2</th>
    <td>Admin1</td>
    <td>You2</td>
    <td>18/16/2020 18:30:00 PM (UTC)</td>
    <td>19/16/2020 18:30:00 PM (UTC)</td>
    <th scope="row">Workflow 06/15001</th>
  </tr>
</table>