It used to be the case that when adding an image in front of text one would use a table. Here is an old fashioned example,
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="/images/icon.gif" alt="Icon image" /></td>
<td>Posted February 1, 2010</td>
</tr>
</table>
Not only is this an obsolete approach, it can be time consuming to load if repeated over and over again.
The preferred method is by accomplishing the same content using CSS. With CSS, you can also get pixel perfect spacing and font control. This is something a <table> tag doesn't readily offer. Below is an example,
<style type="text/css">
.message-listing {
background: url(../images/forum/note-text.gif) no-repeat left 0px;
font-family: Arial, Helvetica, Geneva, Swiss, Verdana, sans-serif;
font-size: 12px;
line-height: 14px;
font-weight: bold;
color: blue;
text-align: left;
margin: 0 0 0 10px;
padding: 0 0 0 17px;
}
</style>
<p class="message-listing">Posted February 1, 2010</p>
Not only will this position the note-text.gif perfectly in front of the text, you also have complete control over the text's appearance.