Table
A table organizes and displays information in rows and columns.
Variations
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
|---|---|---|
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| * Lorem ipsum dolor sit amet. | ||
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
|---|---|---|
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| * Lorem ipsum dolor sit amet. | ||
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
|---|---|---|
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| * Lorem ipsum dolor sit amet. | ||
Details
Usage
The table component is used to list information from a data set in a two-dimensional grid so that the data correlation is understandable by the user.
Guidelines
- You can use the attributes
colspanandrowspanto merge cells - Character limits (including spaces):
- 75 characters for the title (
.title)
- 75 characters for the title (
HTML structure
Overall HTML view of a table component:
div.table
div.header (optional)
div.titlediv.wrapper
table
thead (optional)
tr (one or more)
th (one or more)td (one or more)tbody
tr (one or more)
th (one or more)td (one or more)tfoot (optional)
tr (one or more)
td (one or more)Presets
Table presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| Sortable | Whenever you want to make the table sortable. An additional class should be added to the th. |
| Basic | Whenever a header is not available. |
Presets are ready to use HTML structures.
Variations
Table variations:
| Variation | Description |
|---|---|
| Default | This snippet is composed of a header and a table of three columns and three rows. |
| Sortable | This snippet is composed of a header and a sortable table of three columns and three rows. The table header needs to have an additional class (sort). |
| Basic | This snippet is solely composed of a table of three columns and three rows. |
Modifiers
Table classes:
| Class | Description |
|---|---|
-align-center | Aligns cell values to the center. |
-no-space-below | Removes margin bottom from the component container. |
-zebra-columns | Makes odd columns white (th cells are exluded). |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The table component can be embedded inside other component:
main (HTML file)
div.table (element)Some components can be placed/embedded inside other components. Whenever this happens, they become elements of the respective parent component and they can no longer be called components.
Nesting
The table component cannot be used as a container of other components and/or elements.
main (HTML file)
div.table