MDL提供了一系列CSS类来应用各种预定义的视觉和行为增强功能，并将表格显示为数据表.下表列出了可用的类及其效果.
| Sr.No. | Class Name&描述 |
|---|---|
| 1 | mdl-data-table 将表标识为MDL组件，并且在表元素上是必需的. |
| 2 | mdl-js-data-table 将基本MDL行为设置为表，并且在表元素上是必需的. |
| 3 | mdl-data-table - selectable 设置所有/个人可选行为(复选框)并且是可选的;继续表元素. |
| 4 | mdl-data-table__cell - 非数字 将文本格式设置为数据单元格并且是可选的;表头和表数据单元都有. |
| 5 | (无) 默认情况下，将数字格式设置为标题或数据单元格. |
以下示例将帮助您了解 mdl-data-table 类对
显示数据表的使用.
<html> <head> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> <thead> <tr><th class = "mdl-data-table__cell--non-numeric">Student</th> <th>Class</th><th>Grade</th></tr> </thead> <tbody> <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td> <td>VI</td><td>A</td></tr> <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td> <td>VI</td><td>B</td></tr> <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td> <td>VI</td><td>A</td></tr> </tbody> </table> </body> </html>
验证结果.
