Basic table .table The classname used to apply general styling of Clarity tables to an HTML table.
Left-aligned table cells .left Use this classname on a td to align its contents to the left edge of the table data cell.
This is not necessary for vertical tables.
Tables without borders .table-noborder This classname will remove borders between table rows as well as the border around the edge of the table.
Also removes the background so that the table will be transparent over the background its container has.
Compact tables .table-compact This classname changes is the height of the table rows from 36px to 24px.
Vertical tables .table-vertical This classname removes the table header and applies table header styles to the left-most column.

<table class="table table-vertical">
    <tbody>
        <tr>
            <th>Basic table</th>
            <td>.table</td>
            <td>...</td>
        </tr>
        <tr>
            <th>Left-aligned table cells</th>
            <td>.left</td>
            <td>...</td>
        </tr>
        <tr>
            <th>Tables without borders</th>
            <td>.table-noborder</td>
            <td>...</td>
        </tr>
        <tr>
            <th>Compact tables</th>
            <td>.table-compact</td>
            <td>...</td>
        </tr>
        <tr>
            <th>Vertical tables</th>
            <td>.table-vertical</td>
            <td>...</td>
        </tr>
    </tbody>
</table>