title: How to have data align to top of html table row
body: <p>I have this html table where I have one cell in the table with <code>rowSpan = 3</code>. so in the first column, I have 3 rows with inputs and in the second column I have a picture showing to span all 3 columns.  I am trying to figure out how the browser figured out how to vertically allocate spacing for each of the rows in the first column.  </p>
  
  <p>I want then to be "tight" so all the empty space (if the picture is big, goes to the bottom). </p>
  
  <p>But it seems like the empty space is being allocated across each row equally. </p>
  
  <p>Is there anyway to change this behavior . . </p>
  
  <p>Here is the table:</p>
  
  <pre><code>&lt;table class="input" border="1"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td valign="top"&gt;G:&lt;/td&gt;
          &lt;td valign="top"&gt;
              &lt;select id="GId" maxlength="50" name="GId"&gt;
                  &lt;option&gt;&lt;/option&gt;
                  &lt;option value="2"&gt;Joe&lt;/option&gt;
                  &lt;option selected="selected" value="3"&gt;Bill&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td id="imageBorder" rowspan="3" align="center"&gt;
              &lt;img class="my_img" src="http://www.example.com/image.png"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td valign="top"&gt;Type:&lt;/td&gt;
          &lt;td valign="top"&gt;
              &lt;select id="EId" maxlength="50" name="EId"&gt;
                  &lt;option&gt;&lt;/option&gt;
                  &lt;option value="10"&gt;&lt;/option&gt;
                  &lt;option selected="selected" value="2"&gt;A&lt;/option&gt;
                  &lt;option value="4"&gt;C&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td valign="top"&gt;Manager:&lt;/td&gt;
          &lt;td valign="top"&gt;
              &lt;select id="ManagerPersonId" maxlength="50" name="ManagerPersonId"&gt;
                  &lt;option&gt;&lt;/option&gt;
                  &lt;option value="204"&gt;A&lt;/option&gt;
                  &lt;option value="183"&gt;B&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td valign="top"&gt;PictureL:&lt;/td&gt;
          &lt;td colspan="2" valign="top"&gt;
              &lt;input id="PictureLink" maxlength="200" name="PictureLink" size="60" value="http://www.example.com/image.png" type="text"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>