Table

Displays a table

Import

@import '@webtui/css/components/table.css';

Usage

<table>
    <thead>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        ...
    </tbody>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
</table>

Examples

Divide

Use the divide- attribute to change the direction of the table dividers

<table divide-="none"></table>
<table divide-="horizontal"></table>
<table divide-="vertical"></table>
<table divide-="both"></table>
<!-- Not providing `divide-` is the same as `divide-="both"` -->
<table></table>

ASCII Boxes

Pair the table component with the box- utility to add box borders around the table

<table box-="none" divide-="none"></table>
<table box-="square" divide-="both"></table>
<table box-="round" divide-="horizontal"></table>
<table box-="double" divide-="vertical"></table>

Reference

Properties

• --table-border-width: The width of the table borders
• --table-border-color: The color of the table borders

Note: If used with box-, --table-border-color inherits the value of --box-border-color

table {
    --table-border-width: 1px;
    --table-border-color: var(--foreground2);
}

Extending

To extend the Table stylesheet, define a CSS rule on the components layer

@layer components {
    table {
        /* ... */
    }
}

Scope

• All <table> elements
• All <tr>, <th>, and <td> elements that are children of a <table>

table {
    tr {
        th {
            /* ... */
        }
        td {
            /* ... */
        }
    }
}