Add style to Xelement in C# for an HTML email

I just had this html email figured out and now i need to style it so that i can get a space between these 2 columns on my table here is my code:

    var html = new XDocument(
 new XElement("html",
     new XElement("body",
         new XElement("h2", "Your entire inventory:"),
         new XElement("table",
             new XElement("tr",
                 new XElement("th", "Product"),

                 new XElement("th", "Quantity")),
                    new XElement("tr",
                 from item in prodList
                 select new XElement("td", item.ProductName, new XElement("td", item.Quantity), new XElement("tr")))
                 ))));

This is the output i get:

Your entire inventory:

                Product                    Quantity
Nissin rich & savory chicken bw - 6 pack  5
The Zombie Survival Guide                 3
Maruchan Ramen Noodle Soup                5
Generic Tomatoes, Whole                   2

So i need to figure out how to put style in the tags to get the padding/border etc in the email

Solution

Your XElement structure is fairly broken (you’re defining tr elements within td elements within other td elements); it’s rather unpredictable how a browser would render the result. Here is how it looks:

<html>
  <body>
    <h2>Your entire inventory:</h2>
    <table>
      <tr>
        <th>Product</th>
        <th>Quantity</th>
      </tr>
      <tr>
        <td>Nissin rich &amp; savory chicken bw - 6 pack<td>5</td><tr /></td>
        <td>The Zombie Survival Guide<td>3</td><tr /></td>
        <td>Maruchan Ramen Noodle Soup<td>5</td><tr /></td>
        <td>Generic Tomatoes, Whole<td>2</td><tr /></td>
      </tr>
    </table>
  </body>
</html>

To start off, you should fix your HTML generation code (see below).

Since you’re intending to use your HTML in emails, you should preferably steer clear of embedded style sheets (despite their appeal for avoiding code repetition). Some email (web)clients, most notably Gmail, simply ignore embedded style sheets (refer to Using CSS and HTML in Email Newsletters). In most cases, it’s safer to use inline styles for HTML emails.

To introduce some spacing between your two columns, you could define an line style="padding-right:50px;" attribute on all cells within the left column; this would ensure that there are 50 pixels of whitespace between the longest product name and the quantities column.

var html = new XDocument(
    new XElement("html",
        new XElement("body",
            new XElement("h2", "Your entire inventory:"),
            new XElement("table",
                new XElement("tr",
                new XElement("th", "Product", 
                    new XAttribute("style", "padding-right:50px;")),
                new XElement("th", "Quantity")),
            from item in prodList
            select new XElement("tr",
                new XElement("td", item.ProductName, 
                    new XAttribute("style", "padding-right:50px;")),
                new XElement("td", item.Quantity))))));

The above code would generate:

<html>
  <body>
    <h2>Your entire inventory:</h2>
    <table>
      <tr>
        <th style="padding-right:50px;">Product</th>
        <th>Quantity</th>
      </tr>
      <tr>
        <td style="padding-right:50px;">Nissin rich &amp; savory chicken bw - 6 pack</td>
        <td>5</td>
      </tr>
      <tr>
        <td style="padding-right:50px;">The Zombie Survival Guide</td>
        <td>3</td>
      </tr>
      <tr>
        <td style="padding-right:50px;">Maruchan Ramen Noodle Soup</td>
        <td>5</td>
      </tr>
      <tr>
        <td style="padding-right:50px;">Generic Tomatoes, Whole</td>
        <td>2</td>
      </tr>
    </table>
  </body>
</html>