I'm having an issue with adding an image to my table. Whenever I place the img tag between the <td> tags, the content in the neighboring cell behaves as if there are <br> tags above it.
I attempted to use display:inline-block, but it had no effect.
Question: How can I prevent the "neighboring content" from moving down?
<table height="100%" width="100%" border="solid black 1px">
<tr class="Content">
<td class="left">
<img src="sample.jpg" width="250px" />
</td>
<td>
<table class="right">
<tr>
<td class="Title">
<h2> Title of movie </h2>
</td>
</tr>
<tr class="description">
<td>Description of movie</td>
</tr>
<tr class="Actors">
<td>
<h2> Actors of movie </h2>
</td>
</tr>
<tr class="buttons">
<td colspan="2">
<p>Option buttons will be here.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>Below are the relevant CSS styles.
.content {
background-color: white;
}
.content .left {
vertical-align: text-top;
width: 250px;
}
.content .right {
vertical-align: text-top;
}