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
HTML | <tr> bgcolor Attribute The HTML <tr> bgcolor Attribute is used to specify the background color of a table row. It is not supported by HTML 5. Attribute Values: color_name: It sets the background color by using the color name.
How to color specific row in a CSS Table. You can use the tr:nth-child(rownumber) to color a particular row in a table using CSS. Above code select the 3 row from top (including table head row) and color background as green and foreground as white.
Actually, it is what does the trick and applies formatting to the whole row based on a value in a given cell. Click the "Format…" button and switch to Fill tab to choose the background color. If the default colors do not suffice, click the "More Colors…" button to pick the one to your liking, and then click OK twice.
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>
you can easily do like this:-
<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>
Demo:- http://jsfiddle.net/VWdxj/7/
Try to use the <font>
tag
<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>
But I think this should work, too:
<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>
EDIT:
Crossbrowser solution:
use capitals in HEX-color.
<th bgcolor="#5D7B9D" color="#FFFFFF"><font color="#FFFFFF">Header 1</font></th>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With