HTML email: top and bottom aligned content

Question

Problem

I am working on an HTML email that contains a list of elements, and I wonder if the project below is possible, given the limitations of email clients.

I currently have a table for each item with two cells (we will call this item-table). The first cell ( info-cell) has a variable height and contains details and links. The second cell ( image-cell) contains the image and also has a variable height. This question relates to this first cell.

I have a table nested in info-cellwith two rows, each with one cell. We will call these cells info-cell-topand info-cell-bottom.

Desired Result

, info-cell-top info-cell-bottom info-cell, item-table.

, rowspan="2" image-cell . , .

info-cell, height="100%", height="1".

, .

jsfiddle.

<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-top: 1px solid #bbbbbb;">
    <tbody>
        <tr>
            <td style="padding: 16px 0px; border-bottom: 1px solid #bbbbbb;">
                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="1">
                    <tbody>
                        <tr>
                            <td style="vertical-align: top;">
                                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
                                    <tbody>
                                        <tr>
                                            <td style="vertical-align: top;">
                                                <strong><a href="#" style="color: #000000; text-decoration: none;">Top aligned</a></strong>

                                                <br>Price
                                                <br>Size
                                                <br>
                                                <br>Wishlist comment - Phasellus sollicitudin consequat consectetur. Morbi a elit leo. Aliquam velit nibh, aliquet quis posuere at, vestibulum nec orci.
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="vertical-align: bottom;">
                                                <br>
                                                <br> <strong><a href="#" style="color: #000000; text-decoration: none;">Bottom aligned</a>
                                        &nbsp;&nbsp;&nbsp;<a href="#" style="color: #000000; text-decoration: none;">Add to cart</a>
                                        </strong>

                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td width="120px" valign="bottom" style="padding-left: 16px;">
                                <div style="text-align: center; background: #ddd; height: 200px;padding: 30px 10px;box-sizing: border-box;"><b>Image with variable height</b>
                                    <br>
                                    <br>(may be shorter than left column)
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

, ? ?

Answer 1

CSS vertical-align:top; td : <td valign="top">.

valign | | , align () | | .

rowspan , ( 2 ) .

valign, rowspan:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="400" height="200" valign="top" bgcolor="#EEEEEE">Align Top
    </td>
    <td width="200" rowspan="2" valign="middle" bgcolor="#777777">
      <img alt="image" src="" width="200" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td width="400" height="300" valign="bottom" bgcolor="#CCCCCC">Align Bottom
    </td>
  </tr>
</table>

, , , , Outlook . ( colspan, )