Basic table .table The classname for applying general styling of Clarity tables to an HTML table.
Left-aligned table cells .left This classname on a td aligns content to the left edge of the table cell.
This is not necessary for vertical tables.
Tables without borders .table-noborder This classname removes borders between table rows and the border around the table.
It also removes the background so that the table is transparent over its container background.
Compact tables .table-compact This classname changes 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 table-noborder table-compact">
    <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>