Table

.Table

Most tables are in some way enhanced by adding the Table component and one of its modifiers like Table--invoice or Table--datatable.

Invoice tables

A table used as an invoice should be modified with the Table--invoice class.

Example

Product QTY Price Discount Tax Amount

Gold Package (Yearly)
Gold Package (Yearly)

Art #: HST-GLDY
Delivery date: 10/8/2015

1.00 105.75 0.00 VAT 25% 105.75USD
Subtotal 105.75USD
VAT 25% 26.44USD
Total 132.19USD

Markup

  1. <table class="Table Table--invoice">
  2.     <thead>
  3.         <tr class="Table-row">
  4.             <th style="u-right-text: 40%">Product</th>
  5.             <th class="u-right-text">QTY</th>
  6.             <th class="u-right-text">Price</th>
  7.             <th class="u-right-text">Discount</th>
  8.             <th>Tax</th>
  9.             <th class="u-right-text">Amount</th>
  10.         </tr>
  11.     </thead>
  12.     <tbody>
  13.         <tr class="Table-bodyrow">
  14.             <td>
  15.                 <p>
  16.                     <strong>Gold Package (Yearly)</strong>
  17.                     <br>
  18.                     <span class="u-fine-print">Gold Package (Yearly)</span>
  19.                 </p>
  20.                 <p class="u-fine-print">
  21.                     <strong>Art #:</strong> HST-GLDY
  22.                     <br>
  23.                     <strong>Delivery date:</strong> 10/8/2015
  24.                     <br>
  25.                 </p>
  26.             </td>
  27.             <td class="u-right-text">1.00</td>
  28.             <td class="u-right-text">105.75</td>
  29.             <td class="u-right-text">0.00</td>
  30.             <td>VAT 25%</td>
  31.             <td class="u-right-text"><span>105.75</span><span class="currency">USD</span></td>
  32.         </tr>
  33.     </tbody>
  34.     <tfoot>
  35.         <tr class="Table-row">
  36.             <td colspan="5">Subtotal</td>
  37.             <td><span>105.75</span><span class="currency">USD</span></td>
  38.         </tr>
  39.         <tr class="Table-row">
  40.             <td colspan="5">VAT 25%</td>
  41.             <td>26.44<span class="currency">USD</span></td>
  42.         </tr>
  43.         <tr class="Table-row">
  44.             <td class="Table-cell--strong" colspan="5">Total</td>
  45.             <td class="Table-cell--strong"><span>132.19</span><span class="currency">USD</span></td>
  46.         </tr>
  47.     </tfoot>
  48. </table>