Menu

Table
A table displays a collections of data grouped into rows

Types

Table

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

A

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.

A

Weight
100%
65 studies
Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess potency
Employee Correct Guesses

Lena
Human Resources

22

Matthew
Fabric Design

15

Lindsay
Entertainment

12

Mark
Executive

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

Definition

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
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
Add User
Approve
Approve All
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

Structured

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

States

Positive / Negative

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

Cells

Error

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

Warning

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

Active

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

Disabled

A cell can be disabled

Name Status Notes
Jamie Approved Requires call
John Selected None
Jamie Approved Requires call
Jill Approved None

Colored Cells

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

Marked

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

Colored and Marked

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

Variations

Single Line

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

Fixed

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

Stacking

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

Selectable Row

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

Selectable Cell

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.
Name Status Edit
John No Action Edit
Jamie Approved Edit
Jill Denied Edit
John No Action Requires change
Jamie Approved Approve
Jill Denied Remove

Vertical Alignment

A table header, row, or cell can adjust its vertical alignment

Name Status Notes
John Approved Notes
1
2
Jamie Approved Notes
1
2

Text Alignment

A table header, row, or cell can adjust its text alignment

Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None

Striped

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

Celled

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

Basic

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

Collapsing Cell

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

Column Count

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

Column Width

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

Collapsing

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

Colored

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

Inverted

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

Sortable

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

Full-Width Header / Footer

A definition table can have a full width header or footer, filling in the gap left by the first column

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
Add User
Approve
Approve All

Padded

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.

Compact

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

Size

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

Scrolling

A table body can scroll vertically.

Some table variants like column width or single line do not work with a scrolling table. If you need such combinations use a stuck table instead.
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.
Name Age Job
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer
Daphne 24 Engineer
Zoe 26 Engineer
Kirk 24 Designer
Doug 24 Engineer
Francis 26 Engineer
Claire 24 Designer
Thomas 27 Engineer
Clint 31 Engineer
Alison 21 Designer
Rachel 19 Engineer
Dave 23 Engineer
Oliver 29 Designer
Sue 23 Engineer
Jennifer 22 Engineer
Zak 27 Designer
18 Entries Average age: 25 2 Job-Types

A scrolling table optionally supports predefined heights long, very long, short and very short

Name Age Job
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer
Daphne 24 Engineer
Zoe 26 Engineer
Kirk 24 Designer
Doug 24 Engineer
Francis 26 Engineer
Claire 24 Designer
Thomas 27 Engineer
Clint 31 Engineer
Alison 21 Designer
Rachel 19 Engineer
Dave 23 Engineer
Oliver 29 Designer
Sue 23 Engineer
Jennifer 22 Engineer
Zak 27 Designer
18 Entries Average age: 25 2 Job-Types

Stuck

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.
A stuck table needs a modern browser with position:sticky support, so does not work in IE11 or legacy Edge
Name Age Job Job Job Job Job Job Job Job Job Job Summary
James 24 Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Accepted
Jill 26 Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Accepted
Elyse 24 Designer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Pending
Daphne 24 Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Accepted
Zoe 26 Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Accepted
Kirk 24 Designer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Engineer Pending
Names:6 av.25 Jobs : 2 Jobs : 2 Jobs : 2 Jobs : 2 Jobs : 2 Jobs : 2 Jobs : 2 Jobs : 2 Jobs : 2 Jobs : 2 2 Pending

Dimmer Message
Dimmer sub-header