Using Foundation to Create Email Template with Tiles - html

Question

I am using the CSS framework Foundation for Email to create a responsive email template. My email design has tiles stacked next to each other, but I can't create the gap between each other using raw Foundation.
My hacky solution involves using css property border to create the visual gaps between the tiles. I am wondering if there is a better solution that what I have tried.
My code at CodePen has two tables. The first table is the table I would like to fix without using any hacky solutions. My second fix involves applying the border css property to visually create the desired gap.
I am looking for a solution that where I don't need to do any hacky solutions like what I've done for the second table.
Desired look: https://imgur.com/a/CiyUUs3
Code: https://codepen.io/anon/pen/qYzGEN

Answer 1

border is not a bad way to go. It's widely supported by email clients and it since you're using it as a style sheet, it can be adjusted depending on the size of the email width through #media queries. The only better way might be <table cellspacing="10"> to force a space between the tables.
The drawback to what you are doinf is that Outlook only has partial support background-color The same with Android. So in some email clients you're not going to have have a white background. My suggestion is to incorporate a 1px border around each table cell style="border: 1px solid #333333;" for differentiation.
<table class="row" cellspacing="10" border="1">
<tr>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 3</td>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 4</td>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 5</td>
</tr>
</table>
I hope that gives you some ideas.
Good luck.

Answer 2

If you don't want to use border then strap yourself in for a very busy looking document. One of the reasons I don't like bootstrap-like frameworks, your at the mercy of a hundred different inline classes.
Foundation 2.2 describes columns for tables as such:
At the top level, a column is a <th> with the class .columns.
Inside of the <th> is another full table. The content of your column goes inside of a <th>. Right below that table header should be another <th> with a class of .expander. This empty element helps the column expand to be full-width on small screens.
Essentially saying, your going to be doing a lot of nesting. The structure will resemble something like this according to Foundation 2.2:
<th class="columns">
<table>
<tr>
<th>CONTENT HERE</th>
<th class="expander"></th>
</tr>
</table>
</th>
...repeat...
However, in your particular circumstance, you need to wrap them in a row because Foundation rows handle columns:
A row is a <table> with a <tbody> and <tr>. Inside of this <tr>, you'll place each individual column. The <table> also has the class .row.
So you get the point, more nesting unfortunately. To answer the question specifically using what I think is the structure Foundation has documented, you would need to make 1 row for each level. Meaning Tile 1&2 have their own row, Tile 3&4&5 have their own and so forth. This gives you the flexibility of the rest of their inline styling classes and aligning classes since you'll be doing it the 'Foundation' way, whatever that means.
Now when testing this, I didn't see any adverse complications while omitting the .expander class, but since they recommend using it, I would just use it per their guidelines.
Here is a revised codepen snippet: https://codepen.io/anon/pen/BxgXJZ
The revision I made is highlighted in red to show boundaries and white to show content for a quick visual aide. Styling and aligning I'll leave up to the scope of your project. This is responsive friendly as your's included classes for it too.
In the case of link-rot, here is the code snippet:
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 1</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 2</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 3</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 4</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 5</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-8 columns" >
<table>
<tr>
<th>TILE 6</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 7</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Answer 3

If you don't want to go with borders, below is an example of how the code will look, basically a lot of tables nested into 1.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="49%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="49%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="32%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="66%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
Hope this gives you an idea of how to your result will look (code view).