Table cell uses a lot more width then it needs

I'm designing a newsletter template and I'm having an issue with a table that contains graphics and text in the same row. For some reason, the graphic pushes the text all the way to the right. I'd like the text to be "connected"/left aligned with the icon as the template uses up to 3 icon sets (icon + text).

https://jsfiddle.net/o1dLoxa8/

The code doesn't look pretty right now as I've been trying everything just to make it work. Anyone able to help me out?

<table border="0" cellpadding="0" cellspacing="0" class="salesListText">        
    <tr>
        <td align="left" valign="middle" class="saleslistIcon"> 
            <img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/billetterL.png" alt="" height="28" width="28" />
        </td>           
        <td align="left" valign="middle" class="saleslistIconText"> 
            Billetter       
        </td>               
    </tr>                   
    <tr>            
        <td valign="baseline" colspan="3">  
            <h2>Kaptein Sabeltann - Kun forestillingen</h2>             
            (Kan kombineres med parkbilletter og/eller overnatting)     
        </td>
    </tr>
    <tr>
        <td valign="baseline">  
            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="salesListSpec">
                <tr>
                    <td valign="baseline" colspan="3">
                        <h4>Pakken inneholder:</h4>
                        - Billetter til forestillingen
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" valign="top" class="saleslistPrice" colspan="3">
            <h2 style="color:#E3178A;"><span>Pris fra&nbsp;</span>240,-</h2>
        </td>
    </tr>
</table>

.saleslistIcon{padding-right:10px;}
.saleslistIconText{color:#B4B4B4; font-size:12px; padding-right:8px;}
.salesListText{width:100%;}
.salesListSpec{padding-top:10px; line-height:170%; display:block;}
h2 span{font-size:16px; font-weight:normal; color:#444444;}

Solution

You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right.

Try putting border="1" onto your table definition to see what I mean.

I'd suggest you use the outer table to create your rows and have only a single TD. Inside each TD then embed secondary tables for complicated layout. I'm assuming an email newsletter, so keep your CSS to a minimum or put it inline rather than a separate style section. A lot of email providers don't play nicely with CSS.

Hope that helps.