Creating cross-client email logo using tables and no images

Question

I am trying to create a "cool" email signature for my company using only text and html with NO images whatsoever. I am trying to recreate our company's logo using only tables since it is basically a four cell table with different bg colors. What seemed easy at first has become quite a nuisance. It obviously looks good in browsers but once I paste it into Outlook 2013 the cells don't retain their height and width values. Any suggestions on how to make this work across most current email clients??

http://codepen.io/anon/pen/wqaLm

Answer 1

Here is a basic example. Not sure exactly what the logo looks like, so here are a few versions. If you want to have the gap between the cells smaller than 20px, you need to use the 3rd technique. This is because Outlook has a min-height on cells of around 19px which will create a larger gap between the rows.

<table width="100" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" height="50" bgcolor="#333333">&nbsp;
    </td>
    <td width="50" height="50" bgcolor="#555555">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="50" height="50" bgcolor="#444444">&nbsp;
    </td>
    <td width="50" height="50" bgcolor="#666666">&nbsp;
    </td>
  </tr>
</table>

<br><br>

<table width="100" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="40" height="40" bgcolor="#333333">&nbsp;
    </td>
    <td width="20" height="40">&nbsp;
    </td>
    <td width="40" height="40" bgcolor="#555555">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="40" height="20">&nbsp;
    </td>
    <td width="20" height="20">&nbsp;
    </td>
    <td width="40" height="20">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="40" height="40" bgcolor="#444444">&nbsp;
    </td>
    <td width="20" height="40">&nbsp;
    </td>
    <td width="40" height="40" bgcolor="#666666">&nbsp;
    </td>
  </tr>
</table>

<br><br>

<table width="60" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="30" height="30" align="left" valign="top">
      <table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#333333">&nbsp;

          </td>
        </tr>
      </table>

    </td>
    <td width="30" height="30" align="right" valign="top">
      <table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#555555">&nbsp;

          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="30" height="30" align="left" valign="bottom">
      <table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#444444">&nbsp;

          </td>
        </tr>
      </table>

    </td>
    <td width="30" height="30" align="right" valign="bottom">
      <table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#666666">&nbsp;

          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 2

Firstly, a good technique is to style your cells inline like:

    <td style="width:10px; height:10px;">

Secondly: have a look at this article: "A complete breakdown of the CSS support for every popular mobile, web and desktop email client"