two column table layout - html

Question

I'm creating an e-mail template to send out but for some reason, I am unable to create two simple columns in the footer area.
Layout:
Code:
<div style="width: 100%; height: 100%;">
<table style="margin: 0px auto 0px auto; padding: 20px 20px 20px 20px; font: normal 10.5px; color: #777777; width: 100%; height: 100%;" align="center">
<tbody>
<tr>
<td>
<table class="content" style="background: none repeat scroll 0% 0% #FFFFFF; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<thead>
<tr style="display: inline-block; width: 100%; background: #1F1F1F;" bgcolor="#1F1F1F">
<td style="width: 100%;" align="left" valign="middle">
<h1 style="padding: 15px 15px 15px 15px; color: #FFFFFF;">Test</h1>
</td>
<td style="border-left: 1px solid #FFFFFF;" align="right">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; border-bottom: 1px solid #FFFFFF; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
</tr>
<tr>
<td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
</table>
How do I modify the above code to create two simple columns in the footer area, that is still within the e-mail's container?

Answer 1

You should make simple structure of html,
Don't make table in table. You can use rowspan. HTML <th> rowspan Attribute
cells in thead tag, recommend to use th tag HTML <thead> Tag
Don't use this style display:inline-block; on tr tag
Put color style on tr tag if cells doesn't have different color
<div style="width: 100%; height: 100%;">
<table class="content" style="background: none; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<thead>
<tr style="width: 100%; background: #1F1F1F;color: #FFFFFF;">
<th style="width: 100%;" align="left" valign="middle" rowspan=2>
<h1 style="padding: 15px 15px 15px 15px;">test</h1>
</th>
<th style="border-left: 1px solid #FFFFFF;border-bottom: 1px solid #FFFFFF;text-decoration: none;text-align: center; padding: 15px 15px" align="right">
test
</th>
</tr>
<tr style="width: 100%; background: #1F1F1F;color: #ffffff; ">
<th style="border-left: 1px solid #FFFFFF;text-decoration: none; text-align: center; padding: 15px 15px" align="right">
test
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
<tr>
<td style="background: red;" colspan="2">
<h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4>
</td>
</tr>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
</tbody>
<tfoot>
<tr style="width: 100%; background: #1F1F1F; color: #ffffff;">
<td>test</td>
<td>test</td>
</tr>
</tfoot>
</table>
</div>
jsfiddle