I am trying the interest example in the O'Riley JavaScript book and am experimenting with right justify since all input and output is numeric. The input is justified but not the output.

[code]<style> /* This is a CSS style sheet: it adds style to the program output */
input { text-align:right; 
        type:"number"} // Since all data is numeric, right justify everything.
.output { font-weight: bold;                 /* Calculated values in bold */
          text-align: right; }                /* Same as input */
#payment { text-decoration: underline; }      /* For element with id="payment" */
#graph { border: solid black 1px; }           /* Chart has simple border */
th, td {vertical-align: top; }                /* Don't center table cells */
</style>
-------------------------------------
<table>
  <tr><th>Enter Loan Data:</th>
      <td></td>
      <th>Loan Balance Cumulative Equity, and Interest Payments</th></tr>
  <tr><td>Amount of the loan ($):</td>
      <td><input id="amount" onchange="calculate();"></td>
      <td rowspan=8>
         <canvas id="graph" width="400" height="250"></canvas></td></tr>
  <tr><td>Annual Interest (%):</td>
      <td><input id="apr" onchange="calculate();"></td></tr>
  <tr><td>Repayment period (years):</td>
      <td><input id="years" onchange="calculate();"></td></tr>
  <tr><td>Zipcode (to find lenders):</td>  
      <td><input id="zipcode" onchange="calculate();"></td></tr>
  <tr><th>Approximate Payments:</th>
      <td><button onclick="calculate();">Calculate</button></td><tr>
  <tr><td>Monthly payment:</td>
      <td>$<span class="output" id="payment"></span></td><tr>
  <tr><td>Total payment:</td>
      <td>$<span class="output" id="total"></span></td><tr>
  <tr><td>Total interest:</td>
      <td>$<span class="output" id="totalinterest"></span></td><tr>
  <tr><th>Sponsors:</th><td colspan=2>
      Apply for your loan with one of these fine lenders:
	  <div id="lenders"></div></td></tr>
</table>[/code]

This is what I have so far: https://wjporter.com/files/interest.html
TIA