html - How to properly align icon and text in a table? -

html - How to properly align icon and text in a table? -

i having problem trying vertically align icon text. basically, i'm trying have image icon top of <td> tag, right now, it's in middle shown in jsfiddle: http://jsfiddle.net/theamazingknight/n6flp/

i set border:1px dotted blue; see each element beingness spaced. default, td tag wraps img tag centered. how set img tag , title header top of table's td tag , align adjacently text?

i tried imitate result putting vertical-align:text-top didn't work. tried position:relative table , setting image top:0; no avail didn't work either. missing here?

html:

<table> <tr> <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td> <td> <strong>title header</strong> <br>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <ul class="arrowlink"> <li><a href="javascript:shownotice('#')">view lorem ipsum</a></li> </ul> </td> </tr> <tr> <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td> <td> <strong>title header</strong><br> pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <ul class="arrowlink"> <li><a href="javascript:shownotice('#')">view lorem ipsum</a></li> </ul> </td> </tr> <tr> <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td> <td> <strong>title header</strong><br> pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <ul class="arrowlink"> <li><a href="javascript:shownotice('#')">view lorem ipsum</a></li> </ul> </td> </tr> <tr> <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td> <td> <strong>title header</strong><br> pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <p>lorem ipsum</p> <ul> <li>hola <a href="javascript:shownotice('#')">google</a><br> <br> </li> <li>include completed <a href="#" target="_blank">lorem ipsum</a></li> </ul> <p>mail to:<br> lorem ipsum<br> attn: lorem ipsum<br> 1234 main street<br> ny ny 12345</p> </td> </tr> <tr> <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td> <td> <strong>title header</strong><br> pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </td> </tr> <tr> <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td> <td> <strong>title header</strong><br> lorem <a href="javascript:shownotice('#')">lorem</a> website lorem ipsum <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p class="small">pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </td> </tr> </table>

css:

*{border:1px dotted blue;} ul,li{padding-left:15px !important;padding:0;margin:0;} /*table, tr, td, p{margin:0;padding:0;}*/ img{margin-right:10px;} img{width:50px;height:50px;}

to vertically align element top of table cell, can utilize css vertical-align:top definition.

td { vertical-align:top; }

documentation

working example

html css html5 html-table tablelayout