Misaligned content in table cells

Question

I am making some table content and got some problems.
When i want to add more text to first table column, it adds extra space do all other columns.
Here u can see what i am saying about

U can check my fiddle here

HTML

<table id="mytable" border="1">
    <tr>
        <td>
            <img src="" />
                <span>some text<br>asdasd<br>asdas</span>
        </td>
        <td>
            <img src="" />
                <span>some text</span>
        </td>

    </tr>
</table>

CSS

    #mytable{
    width:400px;
}
#mytable tr td{
    padding:10px;
}
#mytable tr td img{
    width:200px;
    height:100px;
}

Answer 1

You should set the vertical-align for your td elements

#mytable tr td{
    padding:10px;
    vertical-align: top; /* Add this */
}

Demo

Answer 2

You could do it by using vertical-align: top; to #mytable tr td

JSFiddle - DEMO

HTML:

<table id="mytable" border="1">
    <tr>
        <td>
            <img src="" /> <span>some text<br>asdasd<br>asdas</span>
        </td>
        <td>
            <img src="" /> <span>some text</span>
        </td>
    </tr>
</table>

CSS:

#mytable{
    width:400px;
}
#mytable tr td{
    padding:10px;
    vertical-align: top;
}
#mytable tr td img{
    width:200px;
    height:100px;
}