时间戳

首页 > 解决方案 > 如何将格式应用于电子邮件中的 HTML 表格？

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

问题描述

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

作为该电子邮件的一部分，我希望在电子邮件正文中有一个表格。我已经想出了如何使用一些基本的 HTML 代码来做到这一点，但我正在努力格式化表格。

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

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

非常基本，但做得很好。

我想要做的是为表格添加一点视觉样式。目前，它显示为白色背景上的黑色字符。

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

我还想为标题行着色以使其看起来不错。

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

标签： htmlcsshtml-tableinline-styles

解决方案

在电子邮件的 HTML 中，您必须使用 HTML 属性/内联样式。

例如，在表格开始标签上：

<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 时设置不同的样式，或者仅对前 4 个标题的 HTML 进行硬编码。

推荐阅读