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

修改

Crossbrowser解决方案：

使用HEX颜色的大写字母。

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

Answer 4

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

thead {
    color: #FFFFFF;
}