Positioning text and images within a td cell - html

Question

I have three tables on my page, each with one row, and three data cells inside.
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.
#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;
}
<div id="main-left">
<table id="snake" class="animalcontainer">
<tr>
<td>
<img src="images/snakegraphic.png" alt="Snake Graphic" title="Snake Graphic" width="155" height="196">
</td>
<td>sad</td>
<td id="snakepic">
<img src="images/snake.jpg" alt="Snake" title="Snake" width="152" height="152">
</td>
</tr>
</table>
<table id="bat" class="animalcontainer">
<tr>
<td id="batgraphic">
<img src="images/batgraphic.png" alt="Bat Graphic" title="Bat Graphic" width="198" height="98">
</td>
<td>
<h1>sad</h1>
</td>
<td id="batpic">
<img src="images/bat.jpg" alt="Bat" title="Bat" width="152" height="150">
</td>
</tr>
</table>
<table id="monkey" class="animalcontainer">
<tr>
<td id="monkeygraphic">
<img src="images/monkeygraphic.png" alt="Monkey Graphic" title="Monkey Graphic" width="207" height="185">
</td>
<td>
<h1>sad</h1>
</td>
<td id="monkeypic">
<img src="images/monkey.jpg" alt="Monkey" title="Monkey" width="152" height="150">
</td>
</tr>
</table>
</div>

Answer 1

Silly me, i've just learnt the vertical-align css "thing" which seems to have sorted my issue.
Thanks to anybody who read the question though.
(Fix: giving my middle td cells a class, and adding vertical-align: top; to the css)