title: Use Inline CSS to apply USD Currency Format within HTML Table
body: <p>I am creating a regularly published webcast of sales data and am struggling to properly format the sales totals in USD currency format ($ symbol, thousands comma separator, 2 decimal places). The webcast is controlled using the below file. I am a total HTML &amp; CSS newbie, so appreciate any specific guidance. I have been researching and testing but just need any help or ideas- THANK YOU!</p>
  
  <p>Tried so far:
  Creating a SPAN for this such as:
       
        .dollars:before {content:'$';}
         </p>
  
  <p>Also:
         
              {Source}
              {SalesAmount}
          </p>
  
  <p>I also tried this but couldn't get it working.
  <a href="http://www.webdeveloper.com/forum/showthread.php?43459-CSS-number-formatting" rel="nofollow">http://www.webdeveloper.com/forum/showthread.php?43459-CSS-number-formatting</a>
  and</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style type='text/css'&gt;
   caption.mytable
   {
    background-color:99CCFF;
    color:black;
    border-style:solid;
    border-width:1px;
    border-color:336699;
    text-align:center;
   }
  
   table.mytable
    { 
    font-family:Tahoma;
    border-collapse:collapse;
    font-size:10pt;
    background-color:white;
    width:100%;
    border-style:solid;
    border-color:336699;
    border-width:1px;
   }
  
   th.mytable
   {
    font-size:8pt;
    color:black;
    text-align:center;
    font-weight:bold;
   }
  
   tr.mytable
   { 
   }
  
   td.mytable
   {  
    font-size:8pt;
    background-color:white;
    color:black;
    border-style:solid;
    border-width:1px;
    border-color:cccccc;
    text-align:left;
    padding:3px;
   }
  &lt;/style&gt;
  
  &lt;table class='mytable'&gt;
   &lt;caption class="mytable"&gt;{EVENT_DESCRIPTION_COLOR} as of {EVENT_DATE}&lt;/caption&gt;
   &lt;thead&gt;
    &lt;tr class='mytable'&gt;
     &lt;th class='mytable'&gt;Source Type&lt;/th&gt;
     &lt;th class='mytable'&gt;Sales Amount&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt; 
   &lt;tbody&gt;
    
    &lt;tr class='mytable'&gt;
     &lt;td class='mytable'&gt;{Source}&lt;/td&gt;
     &lt;td class='mytable'&gt;{SalesAmount}&lt;/td&gt;
    &lt;/tr&gt;
    
   &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;style type='text/css'&gt;
   caption.mytable
   {
    background-color:99CCFF;
    color:black;
    border-style:solid;
    border-width:1px;
    border-color:336699;
    text-align:center;
   }
  
   table.mytable
    { 
    font-family:Tahoma;
    border-collapse:collapse;
    font-size:10pt;
    background-color:white;
    width:100%;
    border-style:solid;
    border-color:336699;
    border-width:1px;
   }
  
   th.mytable
   {
    font-size:8pt;
    color:black;
    text-align:center;
    font-weight:bold;
   }
  
   tr.mytable
   { 
   }
  
   td.mytable
   {  
    font-size:8pt;
    background-color:white;
    color:black;
    border-style:solid;
    border-width:1px;
    border-color:cccccc;
    text-align:left;
    padding:3px;
   }
  &lt;/style&gt;
  
  &lt;table class='mytable'&gt;
   &lt;caption class="mytable"&gt;{EVENT_DESCRIPTION_COLOR} as of {EVENT_DATE}&lt;/caption&gt;
   &lt;thead&gt;
    &lt;tr class='mytable'&gt;
     &lt;th class='mytable'&gt;Source Type&lt;/th&gt;
     &lt;th class='mytable'&gt;Sales Amount&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt; 
   &lt;tbody&gt;
    
    &lt;tr class='mytable'&gt;
     &lt;td class='mytable'&gt;{Source}&lt;/td&gt;
     &lt;td class='mytable'&gt;{SalesAmount}&lt;/td&gt;
    &lt;/tr&gt;
    
   &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>