2

estoy tratando de crear una plantilla de correo electrónico con un layout que muestre en la misma sección tres columnas en ordenadores y una en móviles - no puedo utilizar @media queries ya que necesito que se vea bien incluso en outlook.

hasta ahora llevo esto, pero lo único que he conseguido es apilarlos verticalmente...

<table class="responsiveContainer" cellpadding="0" cellspacing="0" align="center" width="640" height="205" style="max-width: 640px;">
  <tr>
    <td>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
3
  • De todas formas lo de las columnas que pides es el html, no puedes pasar de 3 a 1 asi sin mas, almenos usando tablas. A la tabla ya le dices que tenga X columnas.
    – GDP
    el 29 sep. 2017 a las 6:53
  • Creo que no me explique muy bien- estoy tratando de ubicar tres tablas de forma horizontal (que estén puestas una junto a otra en pantallas anchas y que cambien a una sobre otra en móviles)
    – fvickyna
    el 29 sep. 2017 a las 14:51
  • entonces css, echale un ojo a las media queries
    – GDP
    el 2 oct. 2017 a las 7:26

1 respuesta 1

0

Tienes creada una tabla, pero no le has hasignado estilos. Por otra parte, una plantilla para mail sigue siendo un documento web y como tal deberia de empezarlo igual que una pagina web, ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style type="text/css">
        body {margin: 0; padding: 0; min-width: 100%!important;}
        table {width: 100%; max-width: 600px;} 
        </style>
</head>
<body>
    <table class="responsiveContainer" cellpadding="0" cellspacing="0" align="center" width="640" height="205" style="max-width: 640px;">
  <tr>
    <td>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
1
  • El pedazo de html que puse ahí es una sección de mi html solamente-- en esta sección necesito que las 3 tablas estén una al lado de otra, formando tres columnas en pantallas anchas (escritorio) y una debajo de otra, formando una sola columna en móviles
    – fvickyna
    el 29 sep. 2017 a las 14:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.