Me preguntaba si utilizo el atributo colspan en una tabla HTML que pretendo tener como un correo electrónico, los clientes de correo electrónico (Outlook, etc.) entenderán qué hace colspan, ya que he leído que esto podría causar un problema con el ¿diseño?Correo electrónico HTML - ¿Está permitido colspan?
Yep. Todas las marcas HTML están permitidas en la mayoría, si no en todos, los clientes de correo electrónico. Cuando se trata de secuencias de comandos, entonces tiene un problema con el que lidiar, ya que la mayoría de los clientes de correo electrónico, si no todos, no permiten secuencias de comandos.
Ok, gracias por eso, no quiero hacer scripts, simplemente usando una tabla HTML para diseñar un correo electrónico :) – CallumVass
Puede que también quiera usar CSS, pero trate de mantener sus imágenes al mínimo. Muchas personas configuran a sus clientes para que no carguen imágenes al ver un mensaje de correo electrónico por razones de seguridad u otras. – DoctorLouie
He intentado CSS y solo funcionan algunas propiedades de CSS, por eso he recurrido al uso de una tabla para ayudar en el diseño – CallumVass
sólo pensé Identificación añadir un poco de entrada a su pregunta
Colspan se puede utilizar pero sugeriría contra ella. Cada vez que creo correos electrónicos (6 meses de experiencia) siempre he usado tablas anidadas. Además, solo puede usar css en línea en los correos electrónicos, así que sería muy cuidadoso al usar incluso margen y relleno.
Un par de cosas que hago en cada correo electrónico.
Utilice siempre este código en cada imagen de su página. Corregirá un espacio de Gmail debajo del error de imagen.
style="display:block"
También use el borde = "0" en cualquier enlace de imagen para evitar que aparezca un borde azul.
Espero que esto ayude!
Otro consejo, además de la style = "display: block' es añadir line-height: 0 en el con una imagen en - esto arregla el error de espacio en blanco extraño en Outlook 2007.
utilizo colspans todo el tiempo, pero también mesas nido donde sea posible - evitar filas - son pesadillas, y cuando anides las mesas no te vuelvas loco y anidas 4/5 o 6, creo que eso empieza a atascar cosas.
Tengo cantidades ridículas de tablas en el mío. Normalmente tengo alrededor de 3 tablas anidadas incluso antes de escribir cualquier contenido lol – Undefined
Colspan y rowspan son totalmente compatibles en todos los principales clientes de correo electrónico. Son más difíciles, pero si lo hace bien, son una gran opción en combinación con tablas anidadas.
La razón por la que tienen una mala reputación, además de la dificultad es porque hay una particular peculiaridad en Outlook que debe tener en cuenta, de lo contrario su diseño puede romperse.
Colspan:
Outlook tiene un problema por el que si se pone un colspan en la primera fila de una tabla, se hace un lío el ancho de las filas posteriores. La solución para esto es que debe especificar el ancho de sus celdas en la fila superior, incluso si se trata de una fila vacía.
Aquí se muestra un ejemplo:
<!-- the second row in this example will not respect the specified widths in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
</td>
<td width="400">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
ROWSPAN:
Aún más evitarse que colspan es rowspan. Descubrí que, en realidad, puede mostrarse de forma más consistente que las tablas de anidación, dependiendo de su público objetivo. Esto se debe a que las filas (particularmente una extendida) no se separan tanto como las tablas al reenviar el correo electrónico desde Outlook debido a las etiquetas <p class="msoNormal"> que Outlook ajusta a su alrededor. Estas lagunas son particularmente inevitables si alguien forwards your email to Gmail.
Una cosa a tener en cuenta es que rowspan no parece funcionar con Blackberry (que no consideraría un cliente importante). Así que, al igual que con cualquier cosa en el correo electrónico html, debes jugar el juego de porcentajes y decidir dónde quieres que se rompa.
Un ejemplo básico de colspan y rowspan trabajar juntos:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr><!-- hidden row to establish widths in Outlook -->
<td width="200">
</td>
<td width="200">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#333333">...
</td>
<td width="200" height="400" rowspan="2" bgcolor="#444444">...
</td>
</tr>
<tr>
<td width="200" height="400" rowspan="2" bgcolor="#555555">...
</td>
<td width="200" height="200" bgcolor="#666666">...
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#777777">...
</td>
</tr>
</table>
para lograr algo similar a esto sin rowspan/colspan, habría que dividir las celdas de la tabla rectangulares en pequeños cuadrados. Imagine si la celda superior derecha era una imagen que se superponía al encabezado see this question for a real world example. Si tuviera que evitar filas y dividir horizontalmente la imagen del logotipo dentro de dos celdas apiladas, esto sería problemático cuando Outlook lo hiciera en forma normal. A nadie le gusta una costura en su imagen.
En el correo electrónico html, siempre puede dividir las imágenes verticalmente sin ningún riesgo de costuras/huecos, pero, por regla general, siempre debe evitar dividir una imagen horizontalmente. Rowspan ayuda a evitar esto en escenarios cuando desea superponer imágenes.
Una última nota: Outlook también tiene el mismo problema de expansión con rowspan que con colspan. Debe establecer las alturas de fila en la primera columna para que respete las alturas de las siguientes filas distribuidas. Aquí hay un example of that. Tenga en cuenta que la primera celda de cada fila está vacía.
Brillante respuesta, gracias por una explicación tan completa. Esto acaba de resolver un gran dolor de cabeza que tuve con la representación de Outlook. – JSancho
Rowspans y Colspans están bien, pero le sugiero encarecidamente que utilice tablas anidadas. Tendrás líneas de código adicionales, sin embargo, esto te evitará interrupciones en otros clientes de correo electrónico.
Si puede convencer a su jefe para que se ajuste al presupuesto, le sugiero que use el servicio de [Litmus] (http://litmus.com/) para probar el formato del correo electrónico en varios dispositivos. – amphetamachine