在 C# 中为 HTML 电子邮件添加样式到 Xelement答案

【问题标题】：Add style to Xelement in C# for an HTML email在 C# 中为 HTML 电子邮件添加样式到 Xelement
【发布时间】：2012-02-09 20:16:28
【问题描述】：

我刚刚发现了这封 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

所以我需要弄清楚如何在标签中添加样式以获取电子邮件中的填充/边框等

【问题讨论】：

我当然希望您得到的输出是 XML 而不是您发布的文本。如果没有，为什么要使用XDocument？
我将数据从 mysql 获取到 html 电子邮件的最后一个问题将我带到了那里。这是我的最后一个问题。 stackoverflow.com/questions/9167208/…

标签： c# html styles xelement

【解决方案1】：

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

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

【讨论】：

我知道它会是 css，但我不知道如何告诉 C# 我正在使用 CSS。但现在我要感谢 XAttribute，让我们试试这个，我会回复你的。谢谢
小心；一些电子邮件（网络）客户端，尤其是 Gmail，会忽略 HTML 邮件中的嵌入样式表。
我正在使用 gmail 来查看 html。以及铬的内部。谢谢你的建议

【解决方案2】：

您的XElement 结构已完全损坏（您在其他td 元素中定义tr 元素在其他td 元素中）；浏览器如何呈现结果是相当不可预测的。这是它的外观：

<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，会简单地忽略嵌入的样式表（请参阅 Using CSS and HTML in Email Newsletters）。在大多数情况下，对 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>

【讨论】：