Table (legacy)
For tabular data
API
Tags
| Name | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
<table>
|
Standard HTML tag, accepts <thead> and <tbody> as content |
||||||||||
<thead>
|
Standard HTML tag, accepts a single <tr> as content |
||||||||||
<tbody>
|
Standard HTML tag, accepts <tr> elements as content |
||||||||||
<tr>
|
Standard HTML tag, accepts <td> and <th> as content |
||||||||||
<td>
|
Standard HTML tag, accepts content and renders as table cells. | ||||||||||
<th>
|
Standard HTML tag, accepts content and renders as table row or column header cells. | ||||||||||
| Name | Description |
|---|---|
card-table
|
The most commonly used table style, used for tables containing rows that provide some interaction (like select, edit, or delete) |
borderless
|
Removes the border from a table |
Legacy examples
Applying to <table> element legacy implementations (without
<s-table-container> parent)
`.card-table` class
The most common table style is the .card-table, which is used for most data with some interaction.
Each row is encapsulated in a bordered box with a background color.
| Name | Description | |
|---|---|---|
| Apple | A common tree fruit grown in mild climates |
|
| Orange | A citrus fruit grown in warm climates |
|
| Kiwi | Look it up |
|
Rows can be collapsed with their previous row using the row-collapse class.
<tr class="row-collapse">. In the example below we use it to expand a table row with further
detail about the apples row.
| Name | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Apple | A common tree fruit grown in mild climates | ||||||||||
|
|||||||||||
| Orange | A citrus fruit grown in warm climates. | ||||||||||
The white table cell above uses the bg-white class to set the background color to white:
<td class="bg-white">
`.borderless` class
The .borderless class styles the first column like a header label. It should be used for simple
vertical tabular data (like a statement) with two columns that doesn't need a head row
| Gross | $2100 |
|---|---|
| Export | -- |
| Total | $2100 |
`.table-container` container class
The default table style should be used for any table within a container. To style the container itself, the
.table-container class should be used to provide a border and appropriate padding.
| Name | Quantity | Price |
|---|---|---|
| Apple | 3 | $1 |
| Orange | 2 | $3 |
| Kiwi | 4 | $2 |