position text on top just beside the image in html

Question

I have an image and text beside it with this code. A sample can be seen here:

The problem is that the text is starting from the center of the image (on the right side) whereas i want the text to start from the top right-hand side of the image.

Here is my code:

<table width="550">    
<tr>   
<td>   
<div id="i1">   
<img src="<? echo $row_array[3];?>" height="225" width="225">   
</div>   
</td>   
<td>   
<div id="i2">   
<span style="position: relative; top: 0px; left: 0px;">       
<? echo  $row_array[4];?>   
</span>   
</div>   
</td>   
</tr>   
<tr></tr>   
<?} ?>   
</table>

I have even tried to remove span but it still shows the same way.

i1 in css: margin-left:0px;
i2 in css:
#i2 { display: inline; margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px; }

Answer 1

Add valign="top" attribute to the <td> that contains the text.

Answer 2

I think, unless I'm missing something, that the following should achieve your aims:

td {
    vertical-align: top;
}

This will obviously apply to all tds, so you may wish to specify a particular class or id.