數(shù)據表被用來展示原始數(shù)據集，并且通常出現(xiàn)于桌面企業(yè)產品中。

數(shù)據集可能包含：

• 三個或者更多列的數(shù)據
• 一個相關的可視化
• 用戶可以批量查詢、操作數(shù)據

結構
交互
選擇行
規(guī)格

結構

在最簡單的形式中，一個數(shù)據表包含列名稱的頂層行，以及許多數(shù)據行。如果用戶需要選擇或者操作數(shù)據，每一行應該有一個復選框。

http://wiki.jikexueyuan.com/project/material-design/images/7_1.png" alt="" />

基本數(shù)據表

列頭部

• 12 sp Roboto Medium
• 54% 黑色

表內容

• 13sp Roboto Regular
• 87%黑色

文本對齊

• 右對齊數(shù)據列
• 左對齊文本列

交互

懸停行（桌面）

當用戶懸停到一行任意位置時，顯示一個背景。如果個別的單元格有特別的懸停狀態(tài)，同時顯示單元格和行的狀態(tài)。

懸停背景

• 灰色 200 (#EEEEEE)

http://wiki.jikexueyuan.com/project/material-design/images/7_2.png" alt="" />

懸停于一行

選擇行

當一行被選中，在當前行使用背景。

選中行背景

• 灰色100 (#F5F5F5)

復選框

• 使用第二個應用顏色

http://wiki.jikexueyuan.com/project/material-design/images/7_3.png" alt="" />

一個選中的表格行

排序列

如果列排序被使能，默認排列最重要的數(shù)據，并且在列頭部顯示已排序的狀態(tài)。如果用戶點擊一個已排序的列，反轉排序順序并且旋轉排序圖標。

排序的列名稱

• 12sp Roboto Medium
• 87% 黑色

排序圖標

• 16dp container
• 87% 黑色

http://wiki.jikexueyuan.com/project/material-design/images/7_4.png" alt="" />

帶有正向排序列的表

懸停列名稱（桌面）

如果需要提供列名稱的定義，懸停時顯示一個提示文本。如果可以排序，懸停時顯示一個明亮的排序按鈕，指明這個列是可以排序的。

提示文本

• 遵守提示文本指南

排序按鈕

• 16dp container
• 26% 黑色

http://wiki.jikexueyuan.com/project/material-design/images/7_5.png" alt="" />

懸停于一個列名稱

長頭部標題

有時，列之間采用推薦的 56 dp 內邊距時，列名稱在容器中并不合適。有兩個選項來處理這種情況：

• 1.完整顯示列名稱，在表格容器中使能垂直滾動條。
• 2.縮減列名稱，懸停時顯示全部。

http://wiki.jikexueyuan.com/project/material-design/images/7_6.png" alt="" />

通過一個橢圓階段長的列名稱

http://wiki.jikexueyuan.com/project/material-design/images/7_7.png" alt="" />

懸停于一個截斷的列名稱

內聯(lián)文本編輯

表格可能需要基本的文本編輯（例如，編輯現(xiàn)有的文本內容，或者添加評論）。在表中包含可編輯字段，通過使用 placeholder 文本來提示。你可以使用一個簡單的編輯對話框，只放一個文本框，當然也可以顯示一個完整的對話組件。

Placeholder 文本

• 13sp Roboto Regular
• 26% 黑色
• 文本框中沒有分割線

http://wiki.jikexueyuan.com/project/material-design/images/7_8.png" alt="" />

小的編輯對話框

• 將對話框的邊緣與最近的分割線對齊，或者表格邊緣
• 24 dp 的左邊距和右邊距
• 包含單個的文本框，應用 app 主題
• 用戶通過按動回車鍵確認

http://wiki.jikexueyuan.com/project/material-design/images/7_9.png" alt="" />

一個簡單、單字段的編輯對話框

大的編輯對話框

• 將對話框的邊緣與最近的分隔線或者表格邊緣對齊
• 遵從對話框指南，應用 app 主題
• 用戶通過點擊保存按鈕確認文本

http://wiki.jikexueyuan.com/project/material-design/images/7_10.png" alt="" />

一個復雜靈活的編輯對話框

內聯(lián)編輯按鈕

• 18 dp 容器
• 54% 黑色

http://wiki.jikexueyuan.com/project/material-design/images/7_11.png" alt="" />

（可選）基于圖標的編輯提示。在內容的另一邊的單元格邊緣包含圖標。

內聯(lián)菜單 除了編輯文本框，用戶可能需要從一個預定義的選項列表中選擇。在這種場景中，直接在表格中嵌入一個菜單組件。

內聯(lián)菜單

• 13sp Roboto Regular
• 87% 黑色
• 遵循菜單的空間和尺寸指南

http://wiki.jikexueyuan.com/project/material-design/images/7_12.png" alt="" />

帶有內聯(lián)菜單的表格

http://wiki.jikexueyuan.com/project/material-design/images/7_13.png" alt="" />

一個擴展的內聯(lián)菜單

卡片中的數(shù)據表

數(shù)據表可以被嵌入到卡片中，在頂部和底部放置導航和數(shù)據操作工具。

http://wiki.jikexueyuan.com/project/material-design/images/7_14.png" alt="" />

具有頭部和腳部的表格卡片

卡片標題

• 20sp Roboto Regular
• 87% 黑色

卡片操作圖標（頭部和腳部）

• 24dp container
• 54% 黑色

腳部分頁標簽

• 12sp Roboto Regular
• 54% 黑色

可選頭部

有些表格卡片可能需要帶有操作而不是標題的頭部。這種情況，兩個可能的方法：顯示持續(xù)的操作菜單，或者當條目選中時激活一個內容頭部。

http://wiki.jikexueyuan.com/project/material-design/images/7_15.png" alt="" />

一個表格卡片的可選頭部

操作按鈕

• 使用無邊框按鈕
• 使能條目選擇

著色的頭部

• 為背景使用 50 -值的第二應用顏色
• 顯示選中條目的數(shù)量
• 在條目選擇上顯示可用的內容圖標

規(guī)格

垂直間距

http://wiki.jikexueyuan.com/project/material-design/images/7_16.png" alt="" />

一個數(shù)據表的垂直間距以及它的最后行

• 1.64 dp 的卡片頭部高度
• 2.56 dp 的最后行高度
• 3.48 dp 的數(shù)據行高度

頭部以及腳部內邊距

http://wiki.jikexueyuan.com/project/material-design/images/7_17.png" alt="" />

數(shù)據表卡片中的元素之間的水平內間距。

• 數(shù)據表卡片的一周有 24 dp 的內邊距
• 腳部控制菜單中，32 dp 的內邊距
• 腳部行數(shù)量和標簽之間是 40 dp 的內邊距

列內邊距

http://wiki.jikexueyuan.com/project/material-design/images/7_18.png" alt="" />

列之間的內邊距

• 1.列之間的最小內邊距為 56 dp。列中最寬的條目（包含數(shù)據和列名稱）劃定列的邊框。
• 2.在 24 dp 的圖標容器中，復選框圖標擁有 18 dp 的寬度和高度。