Super subject line can go here. There is also a hidden one which you can use instead. Have a look in the code to see it.

This table is left aligned. Notice the use of "align" instead of "float". This is so that it applies in outlook.

This table is right aligned. Both of these tables have a width of 48%. This is because outlook adds random space between floated tables, and they would drop below each other if we did not set them at less than 100% in total.

Table 2
See, this one is the same height. Notice that the natural size of the spacer gif's used are not 1x1, as outlook 2013 scales images max 200% of their original size.

Table 1
Remember these Table Numbers and then flip into a mobile view... Also, if we wanted the 2 tables above to be the same height, we have to use a spacer gif with a fixed height to set it, like these 2.

Now what about if we had 3 tables you say?

Well its easier to do if the table width is specified in px. For these, I want 3 tables, equally spaced with 16px of padding between them.
Knowing the width of the email is 620, we can work out what the width the tables will be if we remove the space taken up by padding:
16 × 2 = 32
(620 - 32) ÷ 3 = 196

Then I have wrapped the first table in another one, which has its width with padding added back on:
196 + 16 = 212
And then floated the first 2 tables left and the last one right. This creates space between the last 2 tables, so that outlook does not drop them onto 2 lines, and the gap left is exactly the size we want for padding

The next 6 tables go into 2 columns on mobile

Using the "float-right", "float-left", and "half-width" classes available in the framework...

...we can reset the float of these tables to make 2 columns instead of 3...

Watch out for all the Outlook comments in the code...

...as well as the empty table forcing a clear in between the rows for desktop...

...and the spacers forcing the height of these boxes to be equal on both desktop AND mobile.

Don't expect it to look pretty in dreamweaver either

Now this gets a little more tricky if we add a background image behind these 2 tables. When the outlook background-image fix is applied to a section, any floated tables are dropped below each other in outlook. To get around this, we have to use an mso conditional comment to create 2 table cells around the tables. This will only be present for outlook, so the rest of our floating and dropping will be the same.

NB: this section also uses a fixed background - we can do that now

Have a look in the code to see how it was done

NOTE: because these 2 tables will be in separate table-cells in outlook, they have to be floated in the same order that they are in the code, or else they will be reversed in outlook. That means the table on the right always has to drop below the table on the left when using this technique. Remove the background image and use a technique above if you need the opposite to happen.

I have used the class "block" on the parent table, so that it does not make the button table 100% in width for mobile. and then I have applied the class "center" on both the TD and the TABLE for the button.

This is an example of a table whose content centers on mobile

This could be a button

Now what about the reverse. These tables will float next to each other on mobile.

Another 100% width table.

And what about the image swapping technique?

Now lets end with the most complicated one of all...

Table 2

Table 3

Table 4