HTML table not stacking properly

Question

I'm attempting to create an HTML email which is why I'm using tables. I have some beginning text followed by some bullet points beneath it. However, the beginning text is pushed to the right instead of lining up atop the bullet points.

Here's a simple fiddle: http://jsfiddle.net/wWxYg/

My HTML:

<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="15" align="left" valign="top">
            <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />          
        </td>
        <td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;">
            <p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px">
                Title Section Goes Here
            </p>  
            <p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
            </p>   
            <p style="margin: 13px 0 13px; color: #585A63;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
            </p>     
            <p style="margin: 13px 0 13px; color: #585A63;">
                Sub Title Goes Here:<br /><br />
             </p>
                </td>
            </tr>
            <tr>
                <td>

                    <table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;">
                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 1</td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 2</td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 3</td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 4</td>
                        </tr>
                    </table>

                </td>
            </tr>                
</table>

Answer 1

In the first row I swapped the first cell with the second. If you want spacing you can add a padding-left:10px;

jsfiddle: http://jsfiddle.net/wWxYg/2/

Answer 2

In your outer table you have two rows. The first row has two columns and the second row only has one. If you remove the column in the first row that contains the spacer image, it should line up properly.

Remove this:

   <td width="15" align="left" valign="top">
       <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />          
   </td>

Answer 3

It seems to be because you nested one table inside the other. Here's a fiddle with them de-nested: http://jsfiddle.net/wWxYg/1/

Here's the code, too.

<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="15" align="left" valign="top">
            <img src="images/spacer.gif" width="15" height="2" border="0" alt=" "/>          
        </td>
        <td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;">

          <p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px">
          Title Section Goes Here
          </p>

          <p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
          </p>

          <p style="margin: 13px 0 13px; color: #585A63;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
          </p>

          <p style="margin: 13px 0 13px; color: #585A63;">
          Sub Title Goes Here:<br /><br />
          </p>
        </td>
    </tr>                
</table>

<table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;">
    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 1</td>
    </tr>

    <tr><td>&nbsp;</td></tr>

    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 2</td>
    </tr>

    <tr><td>&nbsp;</td></tr>

    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 3</td>
    </tr>

    <tr><td>&nbsp;</td></tr>

    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 4</td>
    </tr>
</table>