Tables

Table

The table utility behaves like HTML <table> element. It defines a block-level box. Table element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

CSS

Inline Table

The inline-table utility does not have a direct mapping in HTML. It behaves like an HTML <table> element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

CSS

| inline-table | display: inline-table; |

Table Caption

The table-caption utility behaves like <caption> HTML element. The HTML <caption> element specifies the caption (or title) of a table.

CSS

Table Cell

The table-cell utility behaves like <td> HTML element. The HTML <td> element defines a cell of a table that contains data. It participates in the table model.

CSS

Table Row

The table-row utility behaves like <tr> HTML element. The HTML <tr> element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.

CSS

Table Column

The table-column utility behaves like <col> HTML element. The HTML <col> element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.

CSS

Table Row Group

The table-row-group utility behaves like <tbody> HTML element. The HTML Table Body element (<tbody>) encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>).

CSS

Table Column Group

The table-column-group utility behaves like <colgroup> HTML element. The HTML <colgroup> element defines a group of columns within a table.

CSS

Table Header Group

The table-header-group utility behaves like <thead> HTML element. The HTML <thead> element defines a set of rows defining the head of the columns of the table.

CSS

The table-footer-group utility behaves like <tfoot> HTML element. The HTML <tfoot> element defines a set of rows summarizing the columns of the table.

CSS

Table Layout

Utilities for controlling the table layout algorithm.

auto
fixed
CSS

Table Border Collapse

Utilities for controlling whether table borders should collapse or be separated.

collapse
separate
CSS

Table Caption Side

The caption utility puts the content of a table's <caption> on the specified side. The values are relative to the writing-mode of the table.

top
bottom
CSS

Table Empty Cells

The empty-cells utility sets whether borders and backgrounds appear around <table>cells that have no visible content. A good use case for empty-cells could be a situation where you may not know whether a table will or will not contain empty data points and you decide to hide them.

visible
hidden
CSS

Example Of Table Utilities

Use above utilities to create elements that behave like their respective table elements.

Raw Html Tags

<table>
    <caption>Council budget</caption>
    <thead>
        <tr>
            <th>Items</th>
            <th scope="col">Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Donuts</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Stationery</th>
            <td>18,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Totals</th>
            <td>21,000</td>
        </tr>
    </tfoot>
</table>

With Windi Utilities

<div class="table">
    <div class="table-caption">Council budget</div>
    <div class="table-header-group">
        <div class="table-row">
            <div class="table-cell">Items</div>
            <div class="table-cell">Expenditure</div>
        </div>
    </div>
    <div class="table-row-group">
        <div class="table-row">
            <div class="table-cell">Donuts</div>
            <div class="table-cell">3,000</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Stationery</div>
            <div class="table-cell">18,000</div>
        </div>
    </div>
    <div class="table-footer-group">
        <div class="table-row">
            <div class="table-cell">Totals</div>
            <div class="table-cell">21,000</div>
        </div>
    </div>
</div>