Menu
Menu
UI Collection: Table
6 of 6
Breadcrumb Form Grid Menu Message Table

Table

A table displays a collections of data grouped into rows

Definition Type
Design
Code
Summary
3 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

Responsive Element

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 as well.

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

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

Responsive

A table can specify additional requirements for screen adjustments

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

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 Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved

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

Even Width

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. This should be the total width of all elements in a column
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.

Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved

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
Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved

Sortable

A table may allow a user to sort contents by clicking on a table header.

Adding a classname of ascending or descending to the th will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.
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 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

Help Make Semantic UI Better

Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.

Contribute
Translation Hub Issue Tracker CLA Create Themes
Semantic Network
Legacy Docs Learn Semantic Semantic Themes Semantic Layouts
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