1.6 atoms.table Tables
The <table>
element displays tabular data in rows, columns, and cells.
Examples
Default styling
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-inverse
Table inverse.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.thead-inverse
Thead inverse.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.thead-default
Thead default.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-striped
Use .table-striped to add zebra-striping to any table row within the .
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-bordered
Add .table-bordered for borders on all sides of the table and cells.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-hover
Add .table-hover to enable a hover state on table rows within a .
Markup:
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-sm
Add .table-sm to make tables more compact by cutting cell padding in half.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-active
Applies the hover color to a particular row or cell.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-success
Indicates a successful or positive action.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-info
Indicates a neutral informative change or action.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-warning
Indicates a warning that might need attention.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
.table-danger
Indicates a dangerous or potentially negative action.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Markup: components/atoms/tables/tables.twig
<table class="table [modifier class]">
<caption>
This is an example table, and this is its caption to describe the contents.
</caption>
<thead class="[modifier class]">
<tr class="[modifier class]">
<th class="[modifier class]">Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr class="[modifier class]">
<td class="[modifier class]">Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="[modifier class]">
<td class="[modifier class]">Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="[modifier class]">
<td class="[modifier class]">Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
Source:
components/atoms/tables/_tables.scss
, line 1