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.

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.

| 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.

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.

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.

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.

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>).

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.

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.

Table Footer Group #

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.

Table Layout #

Utilities for controlling the table layout algorithm.

Table Border Collapse #

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

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.

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.

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>