Search code examples
htmlhtml-tablehtml-email

html emails: how to implement the basic layout

I'm trying to design a basic layout for an html email template. Most examples I've seen use a main wrapper table; I wrote this instead:

 <body>
    <center>
      <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center">
        <tr>
          <td>
            <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center">
              <tr>
                <td>
                  <img src="banner.jpg" alt="" style="width:100%;max-width:600px;height:auto" width="600" />
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center">
        <tr>
          <td width="50%">
            <table align="center">
              <tr>
                <td>
                  <p>content</p>
                </td>
              </tr>
            </table>
          </td>
          <td width="50%">
            <table align="center">
              <tr>
                <td style="text-align:center">
                  <p>content</p>
                </td>
              </tr>
            </table>
          </td>
        </tr>


      </table>
    </center>
</body>

As you can see, there is a first table, for the image banner, and then, instead a second row, there is another separate table. Is it correct as approach? I intended it like separated a website using the section tag.

Solution

  • I have taken your code and made slight changes and added in what @gwally has suggested. The below code will work on all devices that support media queries (including Gmail App). Give the code a spin (run code, go full screen then resize browser) to see how it works.

    You can change the media query to 480px if you want it to target smaller devices.

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lime in the coconut</title>
	<style type="text/css">
		.container{width:600px;}
		@media only screen and (max-width:601px) {
			.container{width:100% !important;}
			.banner img{width:100% !important; height:auto !important;}
		}
	</style>
</head>

<body>
<center>
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto">
    <tr>
      <td>
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:600px;margin: 0 auto">
          <tr>
            <td class="banner">
              <img src="https://i.sstatic.net/AKVzJ.png" alt="" style="max-width:600px;height:auto" width="600" />
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto">
    <tr>
      <td width="50%">
        <table border="0" align="center" cellpadding="5" cellspacing="0">
          <tr>
            <td>
              <p>content</p>
            </td>
          </tr>
        </table>
      </td>
      <td width="50%">
        <table border="0" align="center" cellpadding="5" cellspacing="0">
          <tr>
            <td style="text-align:center">
              <p>content</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>


  </table>
</center>

    Let me know what you think.