与图表行的图像的对齐

Question

I am having problems with a cell in my table, one row table for now, that contains an image. Whenever I put the image inside the cell, the row automatically goes from the top of the table to the center. I tried using v align in the row but the other content ends up looking stupid. Help please. Also I made sure the cell is bigger than the image by sizing down the image. Please help.

Thank you

<table width="710" bgcolor="white" height="600" align="center" cellpadding="10">
    <tr>
        <td width="100" height="150" align="center" valign="top">Home</td>
        <td width="100" height="150" align="center">Food</td>
        <td width="100" height="150" align="center">Hobbies</td>
        <td width="100" height="150" align="center">Martin's Blog</td>
        <td width="300" height="150" colspan="2" valign="top"><img src="yooo.gif" width="250"></td></tr>
    <tr>
        <td height="450">   </td>   </tr>

</table>

Answer 1

Add to the 2nd row same amount of TD or use colspan. valign="top" works ok.

Answer 2

A few things to note.

you should close your <img> tags like so:

<img src="yooo.gif" width="250" />

note the / at the end of the tag.

EDIT Apologies, the <img> tag only needs to be closed when using XHTML. Reference

Secondly the <tr> is the row tag not the <td> tag. You've only applied valign="top" to one of your cells. If you want the rest of the cells in that row to be aligned top you need to add the valign to each cell.

Fiddle example here: http://jsfiddle.net/6E66m/