rowspan - title html css

Correo electrónico HTML-¿Está permitido colspan?

Question

Me preguntaba si utilizaré el atributo colspan en una tabla HTML que pretendo tener como correo electrónico, ¿los clientes (Outlook, etc ...) entenderán qué hace Colspan, ya que he leído que esto podría causar un problema con el diseño?

Answer 1

Colspan y rowspan son totalmente compatibles en todos los principales clientes de correo electrónico. Son más difíciles, pero si lo haces 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 particularidad en Outlook que debe tener en cuenta, de lo contrario, su diseño puede romperse.

Colspan:

Outlook tiene un problema en el que si coloca una colspan en la primera fila de una tabla, desordenará los anchos de las filas subsiguientes. La solución para esto es que necesita especificar los anchos de celda en la fila superior, incluso si es una fila vacía.

Aquí hay 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">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#353535">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
    <td width="200" bgcolor="#555555">&nbsp;
    </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">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#353535">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
    <td width="200" bgcolor="#555555">&nbsp;
    </td>
  </tr>
</table>

Rowspan:

Incluso más evitado que colspan es rowpan. Descubrí que, en realidad, puede mostrarse de forma más coherente que las tablas de anidamiento en función de su público objetivo. Esto se debe a que las filas (en particular las extendidas) no se separan tanto como las tablas al reenviar el correo electrónico desde Outlook debido a las etiquetas <p class="msoNormal"> envuelve Outlook. Estas brechas son particularmente inevitables si alguien envía su correo electrónico a Gmail .

Una cosa a tener en cuenta es que rowpan no parece funcionar con Blackberry (que no consideraría un cliente importante). Así como con cualquier cosa en el correo electrónico html, debes jugar el juego de porcentajes y decidir dónde menos quieres que se rompa.

Un ejemplo básico de colspan y rowspan trabajando 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 rowpan / colspan, tendría que dividir las celdas de la tabla rectangular en cuadrados pequeños. Imagínese si la celda superior derecha era una imagen que se superpone al encabezado, vea esta pregunta para ver un ejemplo del mundo real . Si tuviera que evitar las filas de filas y dividir la imagen del logotipo horizontalmente en dos celdas apiladas, esto se volvería problemático cuando Outlook lo haga de 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 como regla, siempre debe evitar dividir una imagen horizontalmente. Rowspan ayuda a evitar esto en escenarios cuando desea imágenes superpuestas.

Una última nota: Outlook también tiene el mismo problema generalizado con rowpan que con colspan. Debe establecer sus alturas de fila en la primera columna para que respete las alturas de las filas extendidas subsiguientes. Aquí hay un ejemplo de eso . Tenga en cuenta que la primera celda de cada fila está vacía.

Answer 2

Los rowspans y los Colspans están bien, pero te sugiero que uses tablas anidadas. Tendrá líneas de código adicionales, sin embargo, esto lo salvará de cualquier interrupción en otros clientes de correo electrónico.

Answer 3

Otra sugerencia, además de style = "display: block '', es agregar line-height: 0 en la imagen: esto soluciona el error de espacio en blanco impar en Outlook 2007.

Uso colspans todo el tiempo, pero también anida las tablas cuando es posible, evita las filas de filas, son una pesadilla, y cuando lo haces, las tablas de nidos no se vuelven locas y anidan 4/5 o 6, creo que eso empieza a arruinar las cosas.

Answer 4

Sí. Todo el formato HTML está permitido en la mayoría, si no 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, si no todos los clientes de correo electrónico, no permiten las secuencias de comandos.

Answer 5

Solo pensé que añadiría un poco de entrada a tu pregunta

Se puede usar Colspan pero sugeriría en contra. Siempre 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 utilizar incluso el margen y el relleno.

Un par de cosas que hago en cada correo electrónico.

Siempre use 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 border = "0" en cualquier enlace de imagen para evitar que aparezca un borde azul.

¡Espero que esto ayude!