HTML tables and CSS in email

Question

I understand putting HTML and CSS in emails is a pain and some things don't work. So therefore I have to create my layout in table elements which is fine.

Now take this example:

print"<center><Table cellspacing=0 cellpadding=0 border=1 style=\"width:680px;border:1px solid blue\">";
print"<tr><td>";

print "<table cellspacing=0 cellpadding=0 border=1 style=\"width:220px;border:1px solid blue;\">";
        print "<tr><td>";
            print "testing testing";
        print "</tr></td>";
        print "<tr><td>";
            print "testing it";
        print "<tr></td>";
                print "<tr><td>";
            print "testing it";
        print "<tr></td>";



print "</table><br>";

print "<table cellspacing=0 cellpadding=0 border=1 style=\"width:220px;border:1px solid blue;\">";
        print "<tr><td>";
            print "testing testing";
        print "</tr></td>";
        print "<tr><td>";
            print "testing it";
        print "<tr></td>";
                print "<tr><td>";
            print "testing it";
        print "<tr></td>";



print "</table>";

print"</tr></td>";
print "</table></center>";

This outputs like so in the browser (which is fine):

Now the problem is I want the inner tables to float to the left so they appear next to each other, instead of beneath each other. Obviously floats don't work in Outlook, so how else could I do something like that?

Answer 1

Nest them inside another table:

<table>
    <tr>
        <td>
            TABLE 1 GOES HERE
        </td>
        <td>
            TABLE 2 GOES HERE
        </td>
    </tr>
</table>

Answer 2

All CSS Properties not supported in email clients(outlook), so create your table structure properly.

DEMO

HTML

<table style="border:1px solid #00F;" width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="border-bottom:1px solid #00F;" align="left" valign="top">Table One</td>
    <td style="border-bottom:1px solid #00F; border-left:1px solid #00F;" align="left" valign="top">Option 1</td>
    <td style="border-bottom:1px solid #00F; border-left:1px solid #00F;" align="left" valign="top">Option 2</td>
  </tr>
  <tr>
    <td align="left" valign="top">Table Two</td>
    <td style="border-left:1px solid #00F;" align="left" valign="top">Option 1</td>
    <td style="border-left:1px solid #00F;" align="left" valign="top">Option 2</td>
  </tr>
</table>
<br/>
<table style="border:1px solid #00F;" width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="top"><table width="250" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td style="border-bottom:1px solid #00F;" align="left" valign="top">Table Two</td>
        </tr>
        <tr>
          <td style="border-bottom:1px solid #00F;" align="left" valign="top">Option 1</td>
        </tr>
        <tr>
          <td align="left" valign="top">Option 2</td>
        </tr>
      </table></td>
    <td style="border-left:1px solid #00F;" align="left" valign="top"><table width="250" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td style="border-bottom:1px solid #00F;" align="left" valign="top">Table One</td>
        </tr>
        <tr>
          <td style="border-bottom:1px solid #00F;" align="left" valign="top">Option 1</td>
        </tr>
        <tr>
          <td align="left" valign="top">Option 2</td>
        </tr>
      </table></td>
  </tr>
</table>

Answer 3

Andy's answer will place the table cells next to each other - that is the most consistent technique. However, you were asking for a float equivalent. For html email that is align="left".

Example:

<table width="90%" border="0" cellpadding="0" cellspacing="0" bgcolor="#bbbbbb">
  <tr>
    <td align="left">

      <table width="150" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">
        <tr>
          <td height="100">
            ...
          </td>
        </tr>
      </table>

      <table width="150" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#555555">
        <tr>
          <td height="100">
            ...
          </td>
        </tr>
      </table>

      <table width="150" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#777777">
        <tr>
          <td height="100">
            ...
          </td>
        </tr>
      </table>

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

When viewed in an email client, the tables will bump down when there isn't enough room (mobile for example). This is the behavior that float has, while Andy's solution is fixed, meaning your tables (td's) will always be next to each other.