如何格式化由SQL生成并嵌入邮件的HTML表格

Since email clients have limited support for external stylesheets, we'll use inline CSS to ensure your table renders consistently across most clients. Here's the modified HTML with your requested styling:

<font face="Calibri">
Order Summary at 12:53
<P>
  <table style="border-collapse: collapse; width: 100%;">
    <thead>
      <tr>
        <th align="left" style="border: 1px solid #ddd; padding: 8px; background-color: #4CAF50; color: white;">&nbsp Order Code</th>
        <th align="left" style="border: 1px solid #ddd; padding: 8px; background-color: #4CAF50; color: white;">Client Name &nbsp</th>
        <th align="right" style="border: 1px solid #ddd; padding: 8px; background-color: #4CAF50; color: white;">Total Orders &nbsp</th>
        <th align="right" style="border: 1px solid #ddd; padding: 8px; background-color: #4CAF50; color: white;">Orders Shipped &nbsp</th>
        <th align="right" style="border: 1px solid #ddd; padding: 8px; background-color: #ff9800; color: white;">Exceptions: &nbsp</th>
        <th align="center" style="border: 1px solid #ddd; padding: 8px; background-color: #ff9800; color: white;">A</th>
        <th align="center" style="border: 1px solid #ddd; padding: 8px; background-color: #ff9800; color: white;">B</th>
        <th align="center" style="border: 1px solid #ddd; padding: 8px; background-color: #ff9800; color: white;">C</th>
        <th align="center" style="border: 1px solid #ddd; padding: 8px; background-color: #ff9800; color: white;">D</th>
        <th align="center" style="border: 1px solid #ddd; padding: 8px; background-color: #ff9800; color: white;">E</th>
        <th align="center" style="border: 1px solid #ddd; padding: 8px; background-color: #ff9800; color: white;">F</th>
        <th align="center" style="border: 1px solid #ddd; padding: 8px; background-color: #ff9800; color: white;">G</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="left" style="border: 1px solid #ddd; padding: 8px;">&nbsp A133D&nbsp</td>
        <td align="left" style="border: 1px solid #ddd; padding: 8px;">&nbspTesco &nbsp</td>
        <td align="right" style="border: 1px solid #ddd; padding: 8px;"> 3 &nbsp</td>
        <td align="right" style="border: 1px solid #ddd; padding: 8px;"> 0 &nbsp</td>
        <td align="right" style="border: 1px solid #ddd; padding: 8px;"> &nbsp </td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
      </tr>
      <tr>
        <td align="left" style="border: 1px solid #ddd; padding: 8px;">&nbsp A134D&nbsp</td>
        <td align="left" style="border: 1px solid #ddd; padding: 8px;">&nbspAsda &nbsp</td>
        <td align="right" style="border: 1px solid #ddd; padding: 8px;"> 2 &nbsp</td>
        <td align="right" style="border: 1px solid #ddd; padding: 8px;"> 0 &nbsp</td>
        <td align="right" style="border: 1px solid #ddd; padding: 8px;"> &nbsp </td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
      </tr>
      <tr>
        <td align="left" style="border: 1px solid #ddd; padding: 8px;">&nbsp A135D&nbsp</td>
        <td align="left" style="border: 1px solid #ddd; padding: 8px;">&nbspMorrisons &nbsp</td>
        <td align="right" style="border: 1px solid #ddd; padding: 8px;"> 1 &nbsp</td>
        <td align="right" style="border: 1px solid #ddd; padding: 8px;"> 0 &nbsp</td>
        <td align="right" style="border: 1px solid #ddd; padding: 8px;"> &nbsp </td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
        <td align="center" style="border: 1px solid #ddd; padding: 8px;">&nbsp 0 &nbsp</td>
      </tr>
    </tbody>
  </table>
</font>

Key Changes Made: #

• Grid Borders: Added border: 1px solid #ddd to all <th> and <td> elements, plus border-collapse: collapse on the table to remove double borders and create a clean grid.
• Header Color Differentiation:
  • First 4 header cells use a muted green background (#4CAF50) with white text for clear contrast.
  • Exception columns (from "Exceptions:" onwards) use an orange background (#ff9800) to visually separate them from core order metrics.
• Improved Readability: Added padding: 8px to all cells to prevent content from feeling cramped.
• Email-Friendly Styles: Used inline styles exclusively, as most email clients don’t support external or embedded stylesheets reliably.

If you’d prefer a single header color instead of two, just replace the orange background-color value with the green one in all exception column <th> elements.

内容的提问来源于stack exchange，提问作者Geoff Griswald