title: position image at top of cell and on bottom of cell
body: <p>I'm creating a schematic tree of a connection.
  I use tables to create it.
  The first cell contains a panel. This panel has a color and a number in it. At the right if the panel, in the middle I have a horizontal line of 15px width.
  The next cell also a panel like above, but this one also has a horizontal line at the left of also 15px wide.
  The next row has a similar panel in the 2nd cell.</p>
  
  <pre><code>     ********        ********
  -----*      *--------*      *
       ********        ********
                       ********
                   ----*      *
                       ********
  </code></pre>
  
  <p>Now I want the 2nd row to be connected vertically to the one above:</p>
  
  <pre><code>     ********        ********
  -----*      *--------*      *
       ********    |   ********
                   |   ********
                   ----*      *
                       ********
  </code></pre>
  
  <p>I thought of doing this with an extra column that I give the <code>background-color</code> of black and 2px wide.
  It looks almost great, but at the top and at the bottom I don't want to see the line for about 10px.
  I wanted to place little images here, just a white block to go over the line.</p>
  
  <p>question: How can I place two images in one table cell where one is at the top of the cell and one at the bottom of the cell?</p>
  
  <p>I tried this with css:</p>
  
  <pre><code>.imT {
    position: relative;
    top: 0;
    left: 0;
    height: 30px;
    width: 2px;
    float: left;
    display: block;
    vertical-align: top;
  }
  
  .imB {
      position: relative;
      bottom: 0;
      left: 0;
      height: 30px;
      width: 2px;
      float: left;
      display: block;
      vertical-align: bottom;
  }
  </code></pre>
  
  <p>any suggestion is welcome.</p>