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 |
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 |
Tabellen werden zu Charts und Infografiken gezählt und verwenden
deshalb standardmässig die Infografik-/Chart-Schrift .
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 |
Tabellen innerhalb eines Text-Blockes
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 |
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 |
Tabelle UI Schrift.
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 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 |
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'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 |
|