Color a table row with style="color:#fff" for displaying in an email

naveen picture naveen · Apr 20, 2012 · Viewed 291.5k times · Source

We would like to display order details as table in an email

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

We would ideally want the header to have background-color as '#5D7B9D' and text-color as '#fff'.
We are using bgcolor='#5D7B9D' for changing the background-color and are unable to find an alternative to do the same for changing the text-color.
As most of the email providers strip the CSS, we cannot use style attribute at all.

The questions are

  1. How to make the header text appear in white?
  2. Are there any alternate methods?

Answer

RynoRn picture RynoRn · Apr 20, 2012

For email templates, inline CSS is the properly used method to style:

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