Colorea una fila de la tabla con style = "color: # fff" para mostrarla en un correo electrónico


Nos gustaría mostrar los detalles del pedido como tabla en un correo electrónico

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

Lo ideal sería que el encabezado tuviera el color de fondo como '#5D7B9D' y el color de texto como '#fff'.
Estamos usando bgcolor='#5D7B9D' para cambiar el color de fondo y no podemos encontrar una alternativa para hacer lo mismo para cambiar el color del texto.
Como la mayoría de los proveedores de correo electrónico eliminan el CSS, no podemos usar el atributo style en absoluto.

Las preguntas son

  1. Cómo hacer que el texto del encabezado aparezca en blanco?
  2. existen métodos alternativos?
Author: Brian Tompsett - 汤莱恩, 2012-04-20

4 answers

Usted puede hacer fácilmente así:-

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

 27
Author: Shailender Arora,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-20 12:18:06

Para las plantillas de correo electrónico, CSS en línea es el método utilizado correctamente para el estilo:

<thead>
    <tr style="color: #fff; background: black;">
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>
 26
Author: RynoRn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-13 19:34:36

Intenta usar la etiqueta <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>

Pero creo que esto también debería funcionar:

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

EDITAR:

Solución de Crossbrowser:

Use mayúsculas en color hexadecimal.

<th bgcolor="#5D7B9D" color="#FFFFFF"><font color="#FFFFFF">Header 1</font></th>
 5
Author: WolvDev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-20 13:08:48

En lugar de usar etiquetas directas, puede editar el atributo css para el color para que cualquier tabla que haga tenga el mismo texto de encabezado de color.

thead {
    color: #FFFFFF;
}
 0
Author: Reid Svntn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-08 19:12:18