簡體   English   中英

在C#中為Xelement添加樣式以獲取HTML電子郵件

[英]Add style to Xelement in C# for an HTML email

我只是想出了這個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

所以我需要弄清楚如何在標簽中添加樣式以獲得電子郵件中的填充/邊框等

通常使用CSS來定義HTML元素的樣式:

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電子郵件使用內聯樣式更為安全。

要在兩列之間引入一些間距,可以定義一個line 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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM