title: Align two elements to the top and bottom of a table cell
body: <p>I have a table with multiple rows and columns and each cell contains a link and a few small images.  The link needs to be aligned to the top of the cell and the images need to be aligned to the bottom.  Unfortunately using the vertical-align attribute doesn't work and both elements are being placed in the middle of the cell.  Here is the HTML I have so far:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td style='width:120px; height:90px;'&gt;
        &lt;a href='1.html' style='vertical-align:top'&gt;Link 1&lt;/a&gt;
        &lt;div style='vertical-align:bottom'&gt;&lt;img src='1-1.jpg' /&gt;&lt;img src='1-2.jpg' /&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td style='width:120px; height:90px;'&gt;
        &lt;a href='2.html' style='vertical-align:top'&gt;Link 2&lt;/a&gt;
        &lt;div style='vertical-align:bottom'&gt;&lt;img src='2-1.jpg' /&gt;&lt;img src='2-2.jpg' /&gt;&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt; ... &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>EDIT: td height and width is also defined at 120 x 90 px</p>