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

<table class="Table Table--invoice">
    <thead>
        <tr class="Table-row">
            <th style="u-right-text: 40%">Product</th>
            <th class="u-right-text">QTY</th>
            <th class="u-right-text">Price</th>
            <th class="u-right-text">Discount</th>
            <th>Tax</th>
            <th class="u-right-text">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr class="Table-bodyrow">
            <td>
                <p>
                    <strong>Gold Package (Yearly)</strong>
                    <br>
                    <span class="u-fine-print">Gold Package (Yearly)</span>
                </p>
                <p class="u-fine-print">
                    <strong>Art #:</strong> HST-GLDY
                    <br>
                    <strong>Delivery date:</strong> 10/8/2015
                    <br>
                </p>
            </td>
            <td class="u-right-text">1.00</td>
            <td class="u-right-text">105.75</td>
            <td class="u-right-text">0.00</td>
            <td>VAT 25%</td>
            <td class="u-right-text"><span>105.75</span><span class="currency">USD</span></td>
        </tr>
    </tbody>
    <tfoot>
        <tr class="Table-row">
            <td colspan="5">Subtotal</td>
            <td><span>105.75</span><span class="currency">USD</span></td>
        </tr>
        <tr class="Table-row">
            <td colspan="5">VAT 25%</td>
            <td>26.44<span class="currency">USD</span></td>
        </tr>
        <tr class="Table-row">
            <td class="Table-cell--strong" colspan="5">Total</td>
            <td class="Table-cell--strong"><span>132.19</span><span class="currency">USD</span></td>
        </tr>
    </tfoot>
</table>