Tablas

El siguiente código se lo debe usar para colocar tablas en los mails, sin embargo hay que tener en cuenta que se debe procurar que estas no tengan muchas columnas, debido que es mucha información para un mail y no es lo adecuado.

Para usarlo hay que tener en cuenta lo siguiente:

• La tabla se la coloca como <mj-table> debe estar dentro de una columna y sección.

• Existen dos nuevos componentes <tr> y <td>

• tr es para establecer que va a ir una fila de la tabla (se la puede dar estilos como: borde, fondo, etc.

• td es el contenido de cada celda que tiene la fila (tr)

• Para abrir otra fila dentro de la tabla es importante siempre cerrar el tr y así abrir otro, que contendrá las celdas (td), de la siguiente fila.

Nota:

• El tr contiene a los td, y pueden haber varios td en un tr.

• Se puede manejar el ancho de cada celda, tomando en cuenta que toda la tabla se adaptará a la celda que sea más ancha.

El código a usar para tablas es el siguiente:

 <mj-table css-class="lista" padding-top="0px" font-family="Silas, Trebuchet MS, sans-serif">          <tr style="background-color:#00338D;">            <td valign="top"><p class="Table" style="color:#ffffff;">Descripción</p></td>              <td width="50%"><p class="Table"style="color:#ffffff; text-align:right;padding-right:20px; ">Cobertura  </p></td> </tr>                   <tr class="T" style="border-bottom:1px solid #555555;">            <td valign="top" width="50%"><p class="Table"> Vida (Muerte por Cualquier Causa)</p></td>              <td width="50%"><p style="font-weight:normal; font-size:15px;text-align:right; color:#555555; padding-right:20px; "> $25.000 </p></td>                 </tr>  
         
          <tr style="border-bottom:1px solid #555555;">            <td valign="top" width="50%"><p class="Table"> Muerte Accidental  y/o Desmembración Accidental</p></td>              <td width="50%"><p class="Table" style="text-align:right; padding-right:20px;"> $25.000 </p></td>                 </tr> 
         
          <tr style="border-bottom:1px solid #555555;">            <td valign="top" width="50%"><p class="Table"> Incapacidad Total y Permanente</p></td>              <td width="50%"><p class="Table" style="text-align:right; padding-right:20px; "> $25.000 </p></td>                 </tr> 
         
          <tr style="border-bottom:1px solid #555555;">            <td valign="top" width="50%"><p class="Table"> Beneficio Anticipado por Enfermedad Terminal 30%</p></td>              <td width="50%"><p class="Table" style="text-align:right;  padding-right:20px; "> $7.500 </p></td>                 </tr> 
         
          <tr style="border-bottom:1px solid #555555;">            <td valign="top" width="50%"><p class="Table">Gastos por Sepelio titular por cualquier causa.</p></td>              <td width="50%"><p class="Table"style="text-align:right;padding-right:20px; "> $500 </p></td>                 </tr> 
         </mj-table>

Tener en cuenta:

Clase para el Texto de la Tabla:

Se estableció una clase para el texto a usar en las tablas, la cual se la puede usar: .Table, tiene atributos básicos como: font-size, font-weight, color, padding, text-align; atributos que con el CSS en style se los puede modificar si requiere el caso.

<mj-table css-class="TablaCoberura"

Está clase siempre se la va a colocar al inicio del <mj-table> con css-class="TablaCobertura", con esta se llama a todas las clases dentro de la tabla, hay que tener en cuenta que en los estilos se estableció en TablaCobertura, un estilo diferente para los distintos elementos de la tabla.

Clase para el Heading de la Tabla:

Se coloca en estilos de la tabla .TablaCobertura th (aplica solo para el heading de la tabla)

Se estableció una clase para la primera fila de la tabla, en la cual se tiene el background-color y sin borde, para llamar a la clase se pone en <th class="TablaCobertura">

Clase para la fila (tr) de la Tabla:

Se coloca en estilos de la tabla .TablaCobertura tr (aplica solo para el tr de la tabla)

Se estableció una clase para las filas de la tabla, en las cuales se tiene: el borde, el color. Para llamar a esta clase en <td class="TablaCobertura">