A standard table
Tables will automatically stack their layouts for mobile devices. To disable this behavior, use the unstackable variation or tablet stackable to allow responsive adjustments for tablet.
| Name |
Age |
Job |
| James |
24 |
Engineer |
| Jill |
26 |
Engineer |
| Elyse |
24 |
Designer |
| Evidence Rating |
Effect |
Efficacy |
Consensus |
Comments |
|
|
Power Output
|
|
80%
18 studies
|
Creatine supplementation is the reference compound for increasing muscular creatine levels; there is variability in this increase, however, with some nonresponders. |
|
|
Weight
|
|
100%
65 studies
|
Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess potency |
|
| Employee |
Correct Guesses |
|
|
22
|
|
|
15
|
|
|
12
|
|
|
11
|
|
Git Repository
|
|
node_modules
|
Initial commit |
10 hours ago |
|
test
|
Initial commit |
10 hours ago |
|
build
|
Initial commit |
10 hours ago |
|
package.json
|
Initial commit |
10 hours ago |
|
Gruntfile.js
|
Initial commit |
10 hours ago |
A table may be formatted to emphasize a first column that defines a rows content
Definition tables are designed to display on a single background color. You can adjust this by changing @definitionPageBackground, or specifying a background color on the first cell
|
Arguments |
Description |
| reset rating |
None |
Resets rating to default value |
| set rating |
rating (integer) |
Sets the current star rating to specified value |
If you work with the rowspan table technique, fomantic provides a helper class rowspanned to be used for an invisible td column to make sure the styling stays consistent
| Category rowspanned |
Row one |
|
Row two |
A table can be formatted to display complex structured data
UI tables use border-collapse: separate to allow for tables to receive styles that cannot usually be applied to tables like border-radius. However this can cause some cell borders to appear missing with complex layouts that use rowspan or colspan and rows with varying column count.
ui structured table does not support some style features, but can correctly display all valid HTML table content.
| Name |
Type |
Files |
Languages |
| Ruby |
JavaScript |
Python |
| Alpha Team |
Project 1 |
2 |
|
|
|
| Beta Team |
Project 1 |
52 |
|
|
|
| Project 2 |
12 |
|
|
|
| Project 3 |
21 |
|
|
|
A cell or row may let a user know whether a value is good or bad
| Name |
Status |
Notes |
| No Name Specified |
Unknown |
None |
| Jimmy |
Approved |
None |
| Jamie |
Unknown |
Requires call |
| Jill |
Unknown |
None |
A cell or row may call attention to an error or a negative value
| Name |
Status |
Notes |
| No Name Specified |
Approved |
None |
| Jimmy |
Cannot pull data |
None |
| Jamie |
Approved |
Classified |
| Jill |
Approved |
None |
A cell or row may warn a user
| Name |
Status |
Notes |
| No Name Specified |
Unknown |
None |
| Jimmy |
Requires Action |
None |
| Jamie |
Unknown |
Hostile |
| Jill |
Unknown |
None |
A cell or row can be active or selected by a user
| Name |
Status |
Notes |
| Jamie |
Approved |
Requires call |
| John |
Selected |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Approved |
None |
A cell can be disabled
| Name |
Status |
Notes |
| Jamie |
Approved |
Requires call |
| John |
Selected |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Approved |
None |
A cell can be styled by the central color palette colors
| Name |
Status |
Notes |
| No Name Specified |
Unknown |
None |
| Jimmy |
Recording session |
None |
| Jamie |
Unknown |
Baby Party |
| Jill |
Unknown |
Vacation |
A cell or row can be marked by a colored left or right border
Since 2.9.0 you have to follow the class order: First color name, then marked. This is to support colored and marked cells
| Name |
Status |
Notes |
| No Name Specified |
Unknown |
None |
| Jimmy |
Recording session |
None |
| Jamie |
Unknown |
Baby Party |
| Jill |
Unknown |
Vacation |
If you need colored cells which are also marked at the same time in a different color, you have to follow a specific class order and add the colored class to the cell color.
For example red colored right blue marked .
| Name |
Status |
Notes |
| No Name Specified |
Unknown |
None |
A table can specify that its cell contents should remain on a single line, and not wrap.
| Name |
Registration Date |
E-mail address |
Premium Plan |
| John Lilki |
September 14, 2013 |
jhlilk22@yahoo.com |
No |
| Jamie Harington |
January 11, 2014 |
jamieharingonton@yahoo.com |
Yes |
| Jill Lewis |
May 11, 2014 |
jilsewris22@yahoo.com |
Yes |
A table can use table-layout: fixed a special faster form of table rendering that does not resize table cells based on content.
| Name |
Status |
Description |
| John |
Approved |
John is an interesting boy but sometimes you don't really have enough room to describe everything you'd like |
| Jamie |
Approved |
Jamie is a kind girl but sometimes you don't really have enough room to describe everything you'd like |
| Jill |
Denied |
Jill is an alright girl but sometimes you don't really have enough room to describe everything you'd like |
Fixed single line tables will automatically ensure content that does not fit in a single line will receive "..." ellipsis
| Name |
Status |
Description |
| John |
Approved |
This is much too long to fit I'm sorry about that |
| Jamie |
Approved |
Shorter description |
| Jill |
Denied |
Shorter description |
A table can specify how it stacks table content responsively
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
A table can have its rows appear selectable
| Name |
Status |
Notes |
| John |
No Action |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
| John |
No Action |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
A table cell can be selectable
Using an a link inside a selectable cell will automatically make the hit box the entire cell area. By default links will inherit their cell color.
A table header, row, or cell can adjust its vertical alignment
| Name |
Status |
Notes |
| John |
Approved |
Notes
1
2
|
| Jamie |
Approved |
Notes
1
2
|
A table header, row, or cell can adjust its text alignment
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
A table can stripe alternate rows of content with a darker color to increase contrast
| Name |
Date Joined |
E-mail |
Called |
| John Lilki |
September 14, 2013 |
jhlilk22@yahoo.com |
No |
| Jamie Harington |
January 11, 2014 |
jamieharingonton@yahoo.com |
Yes |
| Jill Lewis |
May 11, 2014 |
jilsewris22@yahoo.com |
Yes |
| John Lilki |
September 14, 2013 |
jhlilk22@yahoo.com |
No |
| John Lilki |
September 14, 2013 |
jhlilk22@yahoo.com |
No |
| Jamie Harington |
January 11, 2014 |
jamieharingonton@yahoo.com |
Yes |
| Jill Lewis |
May 11, 2014 |
jilsewris22@yahoo.com |
Yes |
| John Lilki |
September 14, 2013 |
jhlilk22@yahoo.com |
No |
A table may be divided each row into separate cells
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
3 People |
2 Approved |
|
A table can reduce its complexity to increase readability.
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
A cell can be collapsing so that it only uses as much space as required
To ensure icons don't wrap to a separate line you must either specify collapsing on the widest row in the collapsing column, or on all rows
|
node_modules
|
Initial commit |
10 hours ago |
|
test
|
Initial commit |
10 hours ago |
|
build
|
Initial commit |
10 hours ago |
A table can specify its column count to divide its content evenly
| Name |
Status |
Age |
Gender |
Notes |
| John |
Approved |
22 |
Male |
None |
| Jamie |
Approved |
32 |
Male |
Requires call |
| Jill |
Denied |
22 |
Female |
None |
3 People |
2 Approved |
|
|
|
A table can specify the width of individual columns independently.
Tables use a 16 column grid similar to
ui grid
| Name |
Status |
| John |
Approved |
| Jamie |
Approved |
| Jill |
Denied |
3 People |
2 Approved |
A table can be collapsing, taking up only as much space as its rows.
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
3 People |
2 Approved |
|
A table can be given a color to distinguish it from other tables.
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Tomatoes |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
A table's colors can be inverted
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
3 People |
2 Approved |
|
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
| Food |
Calories |
Protein |
| Apples |
200 |
0g |
| Orange |
310 |
0g |
A table may allow a user to sort contents by clicking on a table header.
Adding the class
ascending or
descending to the
th will show the user the sorting direction. This example uses a modified version of the kylefox's
tablesort plugin to provide the proper class names. To make sortable tables work, include
this javascript into your page and call
$('table').tablesort() when the DOM is ready.
| Name |
Status |
Notes |
| John |
No Action |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
3 People |
2 Approved |
|
A definition table can have a full width header or footer, filling in the gap left by the first column
A table may sometimes need to be more padded for legibility
| Name |
Status |
Notes |
| John |
Approved |
He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again. |
| Jamie |
Approved |
Jamie was not interested in purchasing our product. |
| Name |
Status |
Notes |
| John |
Approved |
He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again. |
| Jamie |
Approved |
Jamie was not interested in purchasing our product. |
A table may sometimes need to be more compact to make more rows visible at a time
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Name |
Status |
Another Status |
Notes |
| John |
Approved |
Approved |
None |
| Jamie |
Approved |
Approved |
Requires call |
| John |
Approved |
Approved |
None |
| Jamie |
Approved |
Approved |
Requires call |
| John |
Approved |
Approved |
None |
| Jamie |
Approved |
Approved |
Requires call |
| John |
Approved |
Approved |
None |
| Jamie |
Approved |
Approved |
Requires call |
A table can also be small or large
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
3 People |
2 Approved |
|
| Name |
Status |
Notes |
| John |
Approved |
None |
| Jamie |
Approved |
Requires call |
| Jill |
Denied |
None |
3 People |
2 Approved |
|
A table body can scroll vertically.
You can also use
resizable scrolling and a native resize drag handler will appear to the bottom right of the table body. This needs a
modern browser, so does not work in IE11 or legacy Edge.
A scrolling table optionally supports predefined heights long, very long, short and very short
A table can scroll horizontally having its head, foot, first or last column keep staying stuck.
You can freely stick any combination like head first stuck, foot first last stuck, head foot first stuck, first last stuck, etc.
A stuck table possibly needs to be wrapped into an overflowing container like
scrolling container or
scrolling segment when horizontal scrolling is not needed.
If you don't want to have an extra wrapper, you can use
overflowing stuck table. However, this only works if your overall table columns exceed available width.
