html - 使用 style="color:#fff" 为表格行着色以在电子邮件中显示

Question

我们想在电子邮件中将订单详细信息显示为表格

​<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td>blah blah</td>
        </tr>
    </tbody>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

理想情况下，我们希望标题的背景颜色为“#5D7B9D”，文本颜色为“#fff”。
我们正在使用bgcolor='#5D7B9D'更改背景颜色，但无法找到替代方法来更改文本颜色。
由于大多数电子邮件提供商都剥离了 CSS，我们根本无法使用style属性。

问题是

1. 如何使标题文本显示为白色？
2. 有没有替代方法？

Answer 1

对于电子邮件模板，内联 CSS 是正确使用样式的方法：

<thead>
    <tr style="color: #fff; background: black;">
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>

Answer 2

你可以很容易地这样做： -

    <table>
    <thead>
        <tr>
          <th bgcolor="#5D7B9D"><font color="#fff">Header 1</font></th>
          <th bgcolor="#5D7B9D"><font color="#fff">Header 2</font></th>
           <th bgcolor="#5D7B9D"><font color="#fff">Header 3</font></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td>blah blah</td>
        </tr>
    </tbody>
</table>

演示：- http://jsfiddle.net/VWdxj/7/

Answer 3

尝试使用<font>标签

​<table> 
    <thead> 
        <tr> 
            <th><font color="#FFF">Header 1</font></th> 
            <th><font color="#FFF">Header 1</font></th> 
            <th><font color="#FFF">Header 1</font></th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>blah blah</td> 
            <td>blah blah</td> 
            <td>blah blah</td> 
        </tr> 
    </tbody> 
</table>

但我认为这也应该有效：

​<table> 
    <thead> 
        <tr> 
            <th color="#FFF">Header 1</th> 
            <th color="#FFF">Header 1</th> 
            <th color="#FFF">Header 1</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>blah blah</td> 
            <td>blah blah</td> 
            <td>blah blah</td> 
        </tr> 
    </tbody> 
</table>

编辑：

跨浏览器解决方案：

使用十六进制颜色的大写字母。

<th bgcolor="#5D7B9D" color="#FFFFFF"><font color="#FFFFFF">Header 1</font></th>

Answer 4

您可以编辑颜色的 css 属性，而不是使用直接标记，以便您制作的任何表格都将具有相同的颜色标题文本。

thead {
    color: #FFFFFF;
}