Responsive images in Gmail and stacking with table headers instead of tables

The majority of the email developers use tables to stack elements on mobile but I discovered that you can also stack THs (table headers). This comes in handy especially when due to extra spacing around tables some email clients add, you cannot have the left panel and right panel touching. Well, you can now do that with table headers, let's see how.

In the first example I am only showing how to code responsive images in Gmail. I mentioned this method in the previous post. Works perfectly. Here is a different code example of how to do it:

<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width: 600px" width="600" border="0" cellspacing="0" cellpadding="0">

   <tr>

      <td style="border-collapse: collapse;" align="center">

         <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellspacing="0" cellpadding="0" align="center" width="100%">

            <tr>

               <td style="border-collapse: collapse;" align="center"><img style="display:block; border:none; width:100%; max-width:100%" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat2.jpg" width="600" alt="" title=""/></td>

            </tr>

         </table>

      </td>

   </tr>

</table>

Next snippet of code shows how table headers need to be coded so they stack on mobile:

<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width: 600px" width="600" border="0" cellspacing="0" cellpadding="0" align="left">

   <tr>

      <th width="300">

         <table width="100%" border="0" cellspacing="0" cellpadding="0">

            <tr>

               <td><a style="text-decoration:none; color:#000000;" href="https://www.cineplex.com/default" target="_new"><img style="display: block; border: none; width:100%; max-width:100%" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat3.jpg" width="300" alt="" class="fluid"></a></td>

            </tr>

         </table>

      </th>

      <th width="300">

         <table width="100%" border="0" cellspacing="0" cellpadding="0">

            <tr>

               <td><img style="display: block; border: none; width:100%; max-width:100%" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat4.jpg" width="300" alt="" class="fluid"></td>

            </tr>

         </table>

      </th>

   </tr>

</table>

Note the following:

  1. the wrapper table needs width, either in px or 100%
  2. images need width as well in this format: width:100%; max-width:100%

Now when you have to slice two images that have no space in between or no solid background (imagine a background with a pattern), you can stack them perfectly with THs.

Happy email coding! Your friend, the email snob.