
0
How to get two nested/stacking tables to valign middle?
So below, I have some code for simple paragraph content with a left hand space for an image. What I want to try to do however, is get the two inner-most tables to valign to the middle in desktop view. I know this can be done with cells, but do I have to nest each of those tables in their own cell to acomplish this?
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
<tr>
<td>
<table class="responsive-table" cellspacing="0" cellpadding="0" align="left" border="0" width="40%" valign="top">
<tr>
<td valign="top" width="100%" align="center">
<img width="225" src="https://dummyimage.com/500x500/efefef/888888.png&text=[Image]" alt="Image" />
</td>
</tr>
</table>
<table class="responsive-table" cellspacing="0" cellpadding="0" align="right" border="0" width="50%" valign="top">
<!-- Paragraph -->
<tr>
<td width="100%" valign="top">
<span class="body-copy"><span class="tertiary">Large left hand content module. </span>This is paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem!</span>
</td>
</tr>
<!-- End paragraph -->
include "_button.html"
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Hi, yes you do so your code would become this, with each of the tables wrapped and the wrapping TD given valign="middle" and a height (I've used 400 in the example below).