Question

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

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

Answer 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", ...

Answer 2

您的XElement结构相当破碎（您在其他tr元素中的td元素中定义了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>

在C＃中为Xelement添加样式以用于HTML电子邮件

2 个答案: