Question

I need to create a table with 2 cells (or 2 divs. Doesn’t matter), which will be contained within a TD tag, like this:

<td style="height:200px;">
    <table>
         <tr>
              <td>Top Cell</td>                  
         </tr>
         <tr>
              <td>Bottom Cell</td>
         </tr>
    </table>
</td>

Each cell will contain 1 image (see image below). My problem however, is the image in the top cell always needs to be at the very top and the image in the bottom cell always needs to be at the very bottom, irregardless of the height of the parent TD tag. So in the example below, lets say sample #1’s parent TD tag is 200px height. The images align to the very top and bottom of their cells. If I switch the height of the TD tag to 800px (Sample #2), then the images should still align properly.

alignment sample http://functionalevaluations.com/images/imagealignment.jpg

I should also mention that I can’t hardcode a height into the table itself. The height of the table will always need to be 100% of the parent TD tag and the only value where I can manually adjust the height value is in the parent TD.

How can I do this? Oh, also it doesn’t matter if this is a table or divs or whatever. The only thing that needs to be there is the parent TD tag.

Finally, here’s my current HTML. My parent TD adjusts fine, however the height of my table is always no more than the height of my 2 images. I can’t seem to get it to be the same height of the parent TD:

   <td width="155" valign="top" rowspan="2" style="border:solid 1px #000;height:200px; ">
        <table border="1" cellspacing="0" cellpadding="0" style="height: 100%;">
            <tr>
                <td valign="top" style="height:50%;">

                        <img src='includes/images/itemImages/TopImage.jpg' border="0" 
                            style="vertical-align: top">
                </td>
            </tr>
            <tr>
                <td valign="bottom" style="height:50%;">
                    <img src='includes/images/itemImages/bottomImage.jpg' border="0" style="vertical-align: bottom">
                </td>
            </tr>
        </table>

    </td>

Answer 1

Try this – DEMO

HTML

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td class="top">
            <img src='http://lorempixel.com/100/100' />
        </td>
    </tr>
    <tr>
        <td class="bottom">
            <img src='http://lorempixel.com/100/100' />
        </td>
    </tr>
</table>

CSS

img {
    display: block;
    margin: auto;
}

.top { vertical-align: top; }
.bottom { vertical-align: bottom; }