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.
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; |
The table-caption
utility behaves like <caption>
HTML element. The HTML <caption>
element specifies the caption (or title) of a table.
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.
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.
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.
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>
).
The table-column-group
utility behaves like <colgroup>
HTML element. The HTML <colgroup>
element defines a group of columns within a table.
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.
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.
Utilities for controlling the table layout algorithm.
Utilities for controlling whether table borders should collapse or be separated.
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.
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.
Use above utilities to create elements that behave like their respective table elements.
<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>
<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>