Promo Box HTML Content Not Displaying Correctly

I’ve added a table inside the HTML of a promo box.

Why does the table look different on the live page, than in the promo box editor?

The editor shows the table the way I styled it… the bottom row has white text over a dark background.

However, the live page shows the table having dark text over a white background (the complete opposite).

Please see screen shots below. Why does the live page not display content the way it is coded?

In Editor:

On Live Page:

HTML code from Text Tab:

<table style="width: 499px; height: 187px;" border="0">
<tbody>
<tr style="background-color: #ffffff;">
<td style="border-color: #9c9695; border-width: 1px; border-style: solid;" valign="top"><a href="http://www.finalsmoke.net/wp-content/uploads/2014/03/comparbod.jpg"><img class="size-full wp-image-316 alignleft" style="margin: 5px 8px;" title="Final Smoke Quit-Smoking Formula" alt="comparbod" src="http://www.finalsmoke.net/wp-content/uploads/2014/03/comparbod.jpg" width="70" height="135" />Left Column</a></td>
<td style="border-color: #9c9695; border-width: 1px; border-style: solid;" valign="top">Right Column</td>
</tr>
<tr>
<td style="border-color: #9c9695; border-width: 1px; border-style: solid; background-color: #626b60;" valign="top"><span style="color: #ffffff;"><strong>White Text on Dark Gray Background
</strong></span></td>
<td style="border-color: #9c9695; border-width: 1px; border-style: solid; background-color: #626b60;" valign="top"><span style="color: #ffffff;"><strong>White Text on Dark Gray Background
</strong></span></td>
</tr>
</tbody>
</table>