Menu
Table
UI Docs
Getting Started New in 2.4
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step
Collections
Breadcrumb Form Grid Menu Message Table
Views
Advertisement Card Comment Feed Item Statistic
Modules
Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition
Behaviors
API Form Validation Visibility

Table
A table displays a collections of data grouped into rows

4 Themes
Download

UI Framework

Themable
Build Tools
Choose

Standalone

Default Theme
Precompiled
Choose
Semantic UI
Download ZIP Getting Started

Package Managers

Standalone Table
Download ZIP View GitHub

Package Managers

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

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

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
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

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

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Free & Open Source (MIT)
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header