设计规范
开发者文档
表格有两种用法:
- 一种是简单的数据列表,只包含简单的文本和链接。
- 另一种是把表格当做容器,里面会有很复杂的结构,可能包括图片、链接、复杂的文案等。
1. 默认表格
# | 待付款 | 宝宝数量 | 交易金额 |
---|---|---|---|
所有交易 | 9999.00 | 999 | 99999.00 |
待付款 | 9999.00 | 999 | 99999.00 |
已发货 | 9999.00 | 999 | 99999.00 |
已成功 | 9999.00 | 999 | 99999.00 |
默认的表格样式
2. 带边框和不带边框的表格
# | 待付款 | 宝宝数量 | 交易金额 |
---|---|---|---|
所有交易 | 9999.00 | 999 | 99999.00 |
待付款 | 9999.00 | 999 | 99999.00 |
已发货 | 9999.00 | 999 | 99999.00 |
已成功 | 9999.00 | 999 | 99999.00 |
# | 待付款 | 宝宝数量 | 交易金额 |
---|---|---|---|
所有交易 | 9999.00 | 999 | 99999.00 |
待付款 | 9999.00 | 999 | 99999.00 |
已发货 | 9999.00 | 999 | 99999.00 |
已成功 | 9999.00 | 999 | 99999.00 |
通过
tabled-bordered
和 table-nobordered
可以控制表格的边框显示3. 只有内边框的表格
# | 待付款 | 宝宝数量 | 交易金额 |
---|---|---|---|
所有交易 | 9999.00 | 999 | 99999.00 |
待付款 | 9999.00 | 999 | 99999.00 |
已发货 | 9999.00 | 999 | 99999.00 |
已成功 | 9999.00 | 999 | 99999.00 |
4. 表头在侧边
所有交易 | 9999.00 | 999 | 99999.00 |
---|---|---|---|
待付款 | 9999.00 | 999 | 99999.00 |
已发货 | 9999.00 | 999 | 99999.00 |
已成功 | 9999.00 | 999 | 99999.00 |
表头在侧面
5. 斑马线
# | 待付款 | 宝宝数量 | 交易金额 |
---|---|---|---|
所有交易 | 9999.00 | 999 | 99999.00 |
待付款 | 9999.00 | 999 | 99999.00 |
已发货 | 9999.00 | 999 | 99999.00 |
已成功 | 9999.00 | 999 | 99999.00 |
所有交易 | 9999.00 | 所有交易 | 99999.00 |
待付款 | 9999.00 | 待付款 | 99999.00 |
已发货 | 9999.00 | 已发货 | 99999.00 |
已成功 | 9999.00 | 已成功 | 99999.00 |
水平和垂直的斑马线
6. 首要表格
# | 待付款 | 宝宝数量 | 交易金额 |
---|---|---|---|
所有交易 | 9999.00 | 999 | 99999.00 |
待付款 | 9999.00 | 999 | 99999.00 |
已发货 | 9999.00 | 999 | 99999.00 |
已成功 | 9999.00 | 999 | 99999.00 |
首要表格,颜色接近首要按钮的颜色
7. 二维表格
# | 新客户 uv | 新客户转化率(%) | 老客户 uv | 老客户转化率(%) |
---|---|---|---|---|
昨日 | 1.0 | 1.0 | 1.0 | 1.0 |
前日 | 1.0 | 0.0 | 0.0 | 0.0 |
前两天 | 1.0 | 1.0 | 0.0 | 0.0 |
行业平均 | 50.73 | 0.73 | 0.73 | 0.73 |
当前现状 | 低于平均 | 持平 | 高于平均 | 持平 |
二维表格
8. 综合表格一
成交时间:2014-01-11 11:59 | ||||
---|---|---|---|---|
56.50 | 评价 | |||