CSS

table{
  border-collapse: collapse;
}
td, th{
  border: solid 1px;
  padding: 0.3em;
}
td{
  text-align: right;
}
th{
  background-color: #efefef;
}
input{
  text-align: right;
}

<script type="text/javascript">
<!--
function calculate(){
  var price1 = document.getElementById("price1").textContent;
  var price2 = document.getElementById("price2").textContent;
  var price3 = document.getElementById("price3").textContent;

  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  var num3 = document.getElementById("num3").value;

  var sum1 = price1 * num1;
  var sum2 = price2 * num2;
  var sum3 = price3 * num3;

  document.getElementById("sum1").textContent = sum1;
  document.getElementById("sum2").textContent = sum2;
  document.getElementById("sum3").textContent = sum3;

  document.getElementById("allsum").value = sum1 + sum2 + sum3;
}
-->
</script>

http://webpro.blog.jp/archives/1004105777.html