菜单

表格
表格是通过行列的方式展示数据集合。

下载

类型

表格 (Table)

标准表格

表格在移动设备中将自动堆栈布局。要禁用此行为可以使用 unstackable 变量,或者 tablet stackable 来允许这种行为。
标题 标题 标题
第一
空间 空间
空间 空间 空间
空间 空间 空间
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)

可以格式化表以突出定义行内容的第一列

表单的设计是在单一的背景颜色中显示。但是你可以修改 @definitionPageBackground 来改变,或者在第一个格子里指定背景颜色。
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 [email protected] No
Jamie Harington January 11, 2014 [email protected] Yes
Jill Lewis May 11, 2014 [email protected] Yes
Add User
Approve
Approve All

结构化 (Structured)

一个表可以显示复杂的结构化数据格式

表格使用 border-collapse: separate 来接受不同风格,但通常情况下不能接受 border-radius 的风格。 然而这可能使边框在使用 rowspan 或者 colspan 时出现遗漏。

ui complex table 不支持某些样式功能,但能正确显示 HTML 表格中的内容。

Name Type Files Languages
Ruby JavaScript Python
Alpha Team Project 1 2
Beta Team Project 1 52
Project 2 12
Project 3 21

状态

正面/负面 (Positive / Negative)

单元格或行可以让用户知道它的值是正面的还是负面的

Name Status Notes
No Name Specified Unknown None
Jimmy Approved None
Jamie Unknown Requires call
Jill Unknown None

空间

错误 (Error)

一个单元格或行可能会关注到一个错误或负价值

Name Status Notes
No Name Specified Approved None
Jimmy Cannot pull data None
Jamie Approved Classified
Jill Approved None

警告 (Warning)

一个单元格或行可能会警告用户

Name Status Notes
No Name Specified Unknown None
Jimmy Requires Action None
Jamie Unknown Hostile
Jill Unknown None

激活 (Active)

一个单元格或行可被用户选为激活状态

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

禁用 (Disabled)

表格空间可以显示禁用状态

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

变形

单线 (Single Line)

表格可以指定其单元格内容应保持在单个行上,而不是换行。

Name Registration Date E-mail address Premium Plan
John Lilki September 14, 2013 [email protected] No
Jamie Harington January 11, 2014 [email protected] Yes
Jill Lewis May 11, 2014 [email protected] Yes

固定 (Fixed)

表格可以使用 table-layout: fixed 来定义特殊情况的表格,不会随它不会根据内容调整表格单元格的大小。

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
固定的 single line 表格将在内容过多的时候显示出"..."。
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)

表格可以指定它响应式适应内容

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)

表格的行可以被选中

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 链接,链接效果将自动适用到整个格子中。默认情况下,超链接继承网格颜色。
Name Status Edit
John No Action Edit
Jamie Approved Edit
Jill Denied Edit
John No Action Requires change
Jamie Approved Approve
Jill Denied Remove
Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None

垂直对其 (Vertical Alignment)

表头、行或单元格可以调整其垂直对其方式

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

文本对其 (Text Alignment)

表头、行或单元格可以调整其文本对其方式

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

条纹 (Striped)

一个表可以有一个较暗的颜色的条纹交替内容,来增加对比

Name Date Joined E-mail Called
John Lilki September 14, 2013 [email protected] No
Jamie Harington January 11, 2014 [email protected] Yes
Jill Lewis May 11, 2014 [email protected] Yes
John Lilki September 14, 2013 [email protected] No
John Lilki September 14, 2013 [email protected] No
Jamie Harington January 11, 2014 [email protected] Yes
Jill Lewis May 11, 2014 [email protected] Yes
John Lilki September 14, 2013 [email protected] No

单元 (Celled)

表格的每一行可以被单独的划分出空间

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

基础 (Basic)

一个表可以降低其复杂性,提高可读性。

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)

单元格可以扁平的的显示,以便它只使用所需的空间

为了确保图标不被换行到下一行,必须在所有行或者左宽的行上指定Collapsing。
node_modules Initial commit 10 hours ago
test Initial commit 10 hours ago
build Initial commit 10 hours ago

列计数 (Column Count)

表格可以指定其列计数以均匀地划分其内容

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)

表格可以独立指定各个列的宽度。

表格和网格(ui grid)一样使用默认的16列。
Name Status
John Approved
Jamie Approved
Jill Denied
3 People 2 Approved

扁平 (Collapsing)

表单可以扁平化,占用的空间和它的行一样多。

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

颜色 (Colored)

表格可以给出一个颜色来区分它从其他表。

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)

表格颜色可高亮显示

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)

一个表格可以允许用户通过单击表头来对内容进行排序。

th 中添加类 ascending 或者 descending 将能显示排序的方向箭头。这个例子使用修正版的kylefox表格排序插件 来提供正确的类名。让排序功能生效,需要在你的页面中包含 这个 javascript ,并且在DOM加载完毕后,单元格中调用 $('table').tablesort()
Name Status Notes
John No Action None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved

全宽页眉/页脚 (Full-Width Header / Footer)

表格可以有全宽度页眉或页脚,填充第一列所留下的空白

Name Registration Date E-mail address Premium Plan
John Lilki September 14, 2013 [email protected] No
Jamie Harington January 11, 2014 [email protected] Yes
Jill Lewis May 11, 2014 [email protected] Yes
Add User
Approve
Approve All

间距 (Padded)

表格有时需要更好的易读性

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)

一个表可能需要更紧凑能一次可见所有内容

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)

表格可以有不同尺寸

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