Tables

Default Styling

Tables receive some light default styling in HiQ.

Column 1	Column 2	Column 3	Column 4
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3	Row 1 Cell 4
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3	Row 2 Cell 4
Row 3 Cell 1	Row 3 Cell 2	Row 3 Cell 3	Row 3 Cell 4

<table>
    <thead>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
            <th scope="col">Column 3</th>
            <th scope="col">Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
            <td>Row 1 Cell 4</td>
        </tr>
        <tr>
            <td>Row 2 Cell 1</td>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
            <td>Row 2 Cell 4</td>
        </tr>
        <tr>
            <td>Row 3 Cell 1</td>
            <td>Row 3 Cell 2</td>
            <td>Row 3 Cell 3</td>
            <td>Row 3 Cell 4</td>
        </tr>
    </tbody>
</table>

Remember that you can use .has-text-truncated to truncate the contents of a cell and display an ellipsis.

Use <th> for heading cells. These can be used within in <thead>, <tbody>, or <tfoot>.

Column 1	Column 2	Column 3	Column 4
Row 1	Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 2	Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3	Row 3 Cell 1	Row 3 Cell 2	Row 3 Cell 3
Column 1	Column 2	Column 3	Column 4

<table>
    <thead>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
            <th scope="col">Column 3</th>
            <th scope="col">Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row 1</th>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
        <tr>
            <th scope="row">Row 2</th>
            <td>Row 2 Cell 1</td>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
        </tr>
        <tr>
            <th scope="row">Row 3</th>
            <td>Row 3 Cell 1</td>
            <td>Row 3 Cell 2</td>
            <td>Row 3 Cell 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
            <th scope="col">Column 3</th>
            <th scope="col">Column 4</th>
        </tr>
    </tfoot>
</table>

Property Name (global/local)	Description
--hiq-table-head-border-width --table-head-border-width	Sets the width of the bottom border on cells within the thead element.
--hiq-table-foot-border-width --table-foot-border-width	Sets the width of the top border on cells within the tfoot element.
--hiq-table-caption-padding-vertical --table-caption-padding-vertical	Sets the top and bottom padding on the caption element with a table.
--hiq-table-caption-text-color --table-caption-text-color	Sets the text color on the caption element within a table.
--hiq-table-caption-font-weight --table-caption-font-weight	Sets the font weight for the caption element within a table.
--hiq-table-cell-padding-vertical --table-cell-padding-vertical	Sets the top and bottom padding for th and td elements.
--hiq-table-cell-padding-horizontal --table-cell-padding-horizontal	Sets the left and right padding for th and td elements.
--hiq-table-cell-border-width --table-cell-border-width	Sets the border width for th and td elements.
--hiq-table-cell-border-color --table-cell-border-color	Sets the border color for th and td elements.
--hiq-table-heading-background-color --table-heading-background-color	Sets the background color for th elements.
--hiq-table-heading-text-color --table-heading-text-color	Sets the text color for th elements.
--hiq-table-heading-font-weight --table-heading-font-weight	Sets the font weight for th elements.

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

HiQ places captions after tables by default.

This is a caption for this table.

Column 1	Column 2	Column 3	Column 4
Row 1	Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 2	Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3	Row 3 Cell 1	Row 3 Cell 2	Row 3 Cell 3

<table>
    <caption>This is a caption for this table.</caption>
    <thead>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
            <th scope="col">Column 3</th>
            <th scope="col">Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row 1</th>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
        <tr>
            <th scope="row">Row 2</th>
            <td>Row 2 Cell 1</td>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
        </tr>
        <tr>
            <th scope="row">Row 3</th>
            <td>Row 3 Cell 1</td>
            <td>Row 3 Cell 2</td>
            <td>Row 3 Cell 3</td>
        </tr>
    </tbody>
</table>