在C#中为HTML电子邮件的Xelement添加样式

我刚刚弄清楚了这封html电子邮件，现在我需要对它进行样式设置，这样我就可以在表上的这两列之间留出一个空间。这是我的代码：

    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")))
                 ))));

这是我得到的输出：

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

因此，我需要弄清楚如何在标签中添加样式，以在电子邮件

中获得填充/边框等

定义HTML元素的样式通常使用CSS:

new XElement("html",
    new XElement("head",
        new XElement("style",
            new XAttribute("type", "text/css"),
            "td { border: 1px solid red; }"
        )
    ),
    new XElement("body", ...

您的XElement结构相当破碎（您在其他td元素中的td元素中定义tr元素）；浏览器将如何呈现结果是不可预测的。以下是它的外观：

<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>

首先，您应该修复HTML生成代码（见下文）。

既然你打算在电子邮件中使用HTML，你最好避开嵌入的样式表（尽管它们有避免代码重复的吸引力）。一些电子邮件（网络）客户端，尤其是Gmail，只是忽略了嵌入的样式表（请参阅在电子邮件时事通讯中使用CSS和HTML）。在大多数情况下，对HTML电子邮件使用内联样式更安全。

要在两列之间引入一些间距，可以在左列中的所有单元格上定义一个行style="padding-right:50px;"属性；这将确保在最长的产品名称和数量列之间有50个像素的空白。

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))))));

上述代码将生成：

<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>

相关内容

最新更新

热门标签：