Positioning text inside HTML table with an image - html

Question

I need to have some text next to an image on an HTML page. So I figured a table was the best way to go...
<table width="500px" >
<tbody>
<tr>
<td align="left">
<p>
<b>Isn't she hot??</b>
</p>
</td>
<td align="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</td>
</tr>
</tbody>
Fiddle https://jsfiddle.net/abuMariam/rsnc9vjp/
Problem is what if I want to move that text all the way up or all the way down. I can't because the image width makes both td elements to be wide so I have no way to vertically position the text within its td.
Can I still keep the table but still move the text up and down in its cell?

Answer 1

Yes, just use vertical-align="top" or vertical-align="bottom" on the td. Do you really need to use a table for this though? Tables should seldom be used nowadays, and only for tabular data.
<table width="500px" >
<tbody>
<tr>
<td align="left" style="vertical-align:top;">
<p>
<b>Isn't she hot??</b>
</p>
</td>
<td align="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</td>
</tr>
</tbody>
</table>
Here's one way you could do it without using a table, this method causes the divs to act like table cells:
.container {
width:500px;
display:table;
}
.container > div {
width:50%;
display:table-cell;
}
.container > div p {
margin:0;
}
.container .left {
vertical-align:top;
}
.container .right {
text-align:right;
}
<div class="container">
<div class="left">
<p>
<b>Isn't she hot??</b>
</p>
</div>
<div class="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</div>
</div>