HTML: aligner les images en haut et en bas de cellules

J'ai besoin de créer une table avec 2 cellules (ou 2 divs. N'a pas d'importance), qui sera contenue dans une balise TD, comme ceci:

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

Chaque cellule contient 1 image (voir image ci-dessous). Mon problème, toutefois, est l'image dans la cellule supérieure doit toujours être au top et l'image dans la cellule du bas doit toujours être au bas de la liste, indépendamment de la hauteur du parent balise TD. Ainsi dans l'exemple ci-dessous, permet de dire que l'échantillon n ° 1 du parent balise TD est de 200px de hauteur. Les images s'alignent sur le très haut et le bas de leurs cellules. Si je change la hauteur de la balise TD à 800px (Échantillon n ° 2), puis les images doivent toujours s'aligner correctement.

l'alignement de l'échantillon http://functionalevaluations.com/images/imagealignment.jpg

Je dois aussi mentionner que je ne peux pas coder en dur une hauteur dans la table elle-même. La hauteur de la table devra toujours être à 100% de la société mère balise TD et la seule valeur où je peux régler manuellement la hauteur de la valeur est dans le parent de la TD.

Comment puis-je faire cela? Oh, il n'a pas d'importance si c'est un tableau ou divs ou quoi que ce soit. La seule chose qui doit être là est le parent balise TD.

Enfin, voici mon HTML. Mes parents TD ajuste bien, mais la hauteur de ma table est toujours pas supérieure à la hauteur de mes 2 images. Je n'arrive pas à l'obtenir pour être à la même hauteur du 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>
InformationsquelleAutor goalie35 | 2012-10-25