title: Positioning text and images within a td cell
body: <p>I have three tables on my page, each with one row, and three data cells inside. </p>
  
  <p>My issue is, when adding text to a cell, it is increasing the height of the table though I have already defined a height. My second issue is positioning the pictures in the final (3rd) data cells to be in the middle.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#snake {
    background-color: #c4df9b;
  }
  #bat {
    background-color: #e2e2e2;
    margin-top: 18px;
    margin-bottom: 18px;
  }
  #monkey {
    background-color: #c69c6d;
  }
  #monkeygraphic {
    padding-top: 5px;
  }
  .animalcontainer {
    width: 682px;
    height: 200px;
  }
  .animalcontainer td {
    border: 1px solid black;
    width: 227px;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main-left"&gt;
    &lt;table id="snake" class="animalcontainer"&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;img src="images/snakegraphic.png" alt="Snake Graphic" title="Snake Graphic" width="155" height="196"&gt;
        &lt;/td&gt;
        &lt;td&gt;sad&lt;/td&gt;
        &lt;td id="snakepic"&gt;
          &lt;img src="images/snake.jpg" alt="Snake" title="Snake" width="152" height="152"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;table id="bat" class="animalcontainer"&gt;
      &lt;tr&gt;
        &lt;td id="batgraphic"&gt;
          &lt;img src="images/batgraphic.png" alt="Bat Graphic" title="Bat Graphic" width="198" height="98"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;h1&gt;sad&lt;/h1&gt;
        &lt;/td&gt;
        &lt;td id="batpic"&gt;
          &lt;img src="images/bat.jpg" alt="Bat" title="Bat" width="152" height="150"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;table id="monkey" class="animalcontainer"&gt;
      &lt;tr&gt;
        &lt;td id="monkeygraphic"&gt;
          &lt;img src="images/monkeygraphic.png" alt="Monkey Graphic" title="Monkey Graphic" width="207" height="185"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;h1&gt;sad&lt;/h1&gt;
        &lt;/td&gt;
        &lt;td id="monkeypic"&gt;
          &lt;img src="images/monkey.jpg" alt="Monkey" title="Monkey" width="152" height="150"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>