如何将格式应用于电子邮件中的 HTML table？

Question

我使用 SQL 查询生成 HTML 代码。 HTML 被插入到从数据库发送的电子邮件的 body 中。

作为该电子邮件的一部分，我想在电子邮件的 body 中添加一个 table。我已经想出如何使用一些基本的 HTML 代码来做到这一点，但我正在努力格式化 table.

这是我当前的代码/HTML 电子邮件 body 文本：

<font face="Calibri">Order Summary at 12:53<P>
            <table>
                    <thead>
                            <tr>
                            <th align="left">&nbsp Order Code</th>
                            <th align="left">Client Name &nbsp</th>
                            <th align="right">Total Orders &nbsp</th>
                            <th align="right">Orders Shipped &nbsp</th>
                            <th align="right">Exceptions: &nbsp</th>
                            <th align="center">A</th>
                            <th align="center">B</th>
                            <th align="center">C</th>
                            <th align="center">D</th>
                            <th align="center">E</th>
                            <th align="center">F</th>
                            <th align="center">G</th>
                </tr>
                    </thead>
                    <tbody>
                            <tr>
                            <td align="left">&nbsp A133D&nbsp</td>
                            <td align="left">&nbspTesco &nbsp</td>
                            <td align="right"> 3 &nbsp</td>
                            <td align="right"> 0 &nbsp</td>
                            <td align="right"> &nbsp </td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            </tr>
                            <tr>
                            <td align="left">&nbsp A134D&nbsp</td>
                            <td align="left">&nbspAsda &nbsp</td>
                            <td align="right"> 2 &nbsp</td>
                            <td align="right"> 0 &nbsp</td>
                            <td align="right"> &nbsp </td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            </tr>
                            <tr>
                            <td align="left">&nbsp A135D&nbsp</td>
                            <td align="left">&nbspMorrisons &nbsp</td>
                            <td align="right"> 1 &nbsp</td>
                            <td align="right"> 0 &nbsp</td>
                            <td align="right"> &nbsp </td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            <td align="center">&nbsp 0 &nbsp</td>
                            </tr>
                    </tbody>
           </table>

非常基础，但做得很好。

我想要做的是为 table 添加一点视觉样式。目前显示为白底黑字。

我想在 table 的所有单元格周围加上边框，使其看起来像一个网格。

我还想给 header 行上色，让它看起来更漂亮。

理想情况下，我可以让前四列的标题使用一种颜色，其余 8 列（例外）使用另一种颜色，但如果这样做非常复杂，那么所有标题都使用相同的颜色就可以了.

Answer 1

在 HTML 中，对于电子邮件，您必须使用 HTML attributes/inline 样式。

例如，在 table 开始标签上：

<table cellpadding="0" cellspacing="0" border="1" style="border-collapse: collapse; border: 1px solid #55ff99;">

在单独着色的单元格上：

                            <th align="left" style="color:#ffffff;background-color:#008033">&nbsp Order Code</th>
                            <th align="left" style="color:#ffffff;background-color:#008033">Client Name &nbsp</th>
                            <th align="right" style="color:#ffffff;background-color:#008033">Total Orders &nbsp</th>
                            <th align="right" style="color:#ffffff;background-color:#008033">Orders Shipped &nbsp</th>

根据您编写 SQL 的方式（例如存储过程），您可以使用逻辑对列进行计数并在计数小于 5 时设置不同的样式，或者只是 hard-code 前 4 个标题的 HTML。

如何将格式应用于电子邮件中的 HTML table？

How do I apply formatting to an HTML table in an email?

html

css

html-table

inline-styles