Invoice receipt markup Prompted by a meta answer, here is an HTML page I'm deliberating over in JSBIN and I would like your review, please.


I am not looking to implement the logic, just please focus on HTML &amp; CSS.
Are tables a good candidate to mark up purchase items? I've seen this implemented as a list in each column, which I thought was worse.
How can I best add markup and style to the final total? 


There is a known issue with the CSS border. I'm not asking for you to fix that, but I'm telling you because there is a comment in my code that could possibly make it sound broken. Any other good tips or examples would be great.



td, th { text-align: right; }
tr th:first-child, tr td:first-child { text-align: left; }
tbody tr:last-child td { font-weight: bold;  }
table { border-collapse: collapse; }
tbody tr:last-child { border-top: thick black solid; }
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Description&lt;/th&gt;
      &lt;th&gt;Quantity&lt;/th&gt;
      &lt;th&gt;Rate&lt;/th&gt;
      &lt;th&gt;Amount&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Moon cakes&lt;/td&gt;
      &lt;td&gt;5&lt;/td&gt;
      &lt;td&gt;100&lt;/td&gt;
      &lt;td&gt;500&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Super biscuits&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;500&lt;/td&gt;
      &lt;td&gt;500&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;Total value&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;1000&lt;/td&gt;
 &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
Using a table here is the right choice, however I would put the total into a &lt;tfoot&gt; group where you can address its formatting needs specifically. In addition do use colspan="2" to collapse columns in the total, as well.