Table

A standard table

Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.

This example uses a segment to add padding and a background color.

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

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 attention the user 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 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

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

Name	Status
John	Approved
Jamie	Approved
Jill	Denied
3 People	2 Approved

By default tables take the size of their container. A collapsing takes 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 tables 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

A table may be formatted specifically to provide definitions

Behavior	Arguments	Description
reset rating	None	Resets rating to default value
set rating	rating (integer)	Sets the current star rating to specified value

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

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.

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

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

Types

Table

Responsive Element

States

Positive / Negative

Cells

Error

Warning

Active

Disabled

Variations

Celled

Basic

Even Width

Column Width

Collapsing

Inverted

Definition

Sortable

Padded

Compact

Size