数据表

¥Data tables

Material for MkDocs 定义了数据表的默认样式——这是在项目文档中呈现表格数据的绝佳方式。此外，还可以使用第三方库和一些额外的 JavaScript来实现可排序表格等自定义功能。

¥Material for MkDocs defines default styles for data tables – an excellent way of rendering tabular data in project documentation. Furthermore, customizations like sortable tables can be achieved with a third-party library and some additional JavaScript.

配置

¥Configuration

此配置启用 Markdown 表格支持，通常应默认启用，但为了确保万无一失，请将以下几行添加到mkdocs.yml中：

¥This configuration enables Markdown table support, which should normally be enabled by default, but to be sure, add the following lines to mkdocs.yml:

markdown_extensions:
  - tables

查看其他配置选项：

¥See additional configuration options:

• 表格

  ¥Tables

用法

¥Usage

数据表可以在项目文档中的任何位置使用，并且可以包含任意 Markdown，包括内联代码块以及图标和表情符号：

¥Data tables can be used at any position in your project documentation and can contain arbitrary Markdown, including inline code blocks, as well as icons and emojis:

Data table

| Method      | Description                          |
| ----------- | ------------------------------------ |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

方法 ¥Method	描述 ¥Description
GET ¥GET	获取资源 ¥ Fetch resource
PUT ¥PUT	更新资源 ¥ Update resource
DELETE ¥DELETE	删除资源 ¥ Delete resource

列对齐

¥Column alignment

如果您想要将特定列对齐到left 、 center或right ，您可以使用常规 Markdown 语法将:字符放置在分隔符的开头和/或结尾。

¥If you want to align a specific column to the left, center or right, you can use the regular Markdown syntax placing : characters at the beginning and/or end of the divider.

LeftCenterRight

Data table, columns aligned to left

| Method      | Description                          |
| :---------- | :----------------------------------- |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

方法 ¥Method	描述 ¥Description
GET ¥GET	获取资源 ¥ Fetch resource
PUT ¥PUT	更新资源 ¥ Update resource
DELETE ¥DELETE	删除资源 ¥ Delete resource

Data table, columns centered

| Method      | Description                          |
| :---------: | :----------------------------------: |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

方法 ¥Method	描述 ¥Description
GET ¥GET	获取资源 ¥ Fetch resource
PUT ¥PUT	更新资源 ¥ Update resource
DELETE ¥DELETE	删除资源 ¥ Delete resource

Data table, columns aligned to right

| Method      | Description                          |
| ----------: | -----------------------------------: |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

方法 ¥Method	描述 ¥Description
GET ¥GET	获取资源 ¥ Fetch resource
PUT ¥PUT	更新资源 ¥ Update resource
DELETE ¥DELETE	删除资源 ¥ Delete resource

定制

¥Customization

可排序的表格

¥Sortable tables

如果您想让数据表可排序，您可以添加tablesort ，它与 Material for MkDocs 原生集成，并且还可以通过额外的 JavaScript进行即时加载：

¥If you want to make data tables sortable, you can add tablesort, which is natively integrated with Material for MkDocs and will also work with instant loading via additional JavaScript:

docs/javascripts/tablesort.js mkdocs.yml

document$.subscribe(function() {
  var tables = document.querySelectorAll("article table:not([class])")
  tables.forEach(function(table) {
    new Tablesort(table)
  })
})

extra_javascript:
  - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
  - javascripts/tablesort.js

应用自定义后，可以通过单击列对数据表进行排序：

¥After applying the customization, data tables can be sorted by clicking on a column:

Data table, columns sortable

| Method      | Description                          |
| ----------- | ------------------------------------ |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

方法 ¥Method	描述 ¥Description
GET ¥GET	获取资源 ¥ Fetch resource
PUT ¥PUT	更新资源 ¥ Update resource
DELETE ¥DELETE	删除资源 ¥ Delete resource

请注意， tablesort提供了其他比较实现，例如数字、文件大小、日期和月份名称。有关更多信息，请参阅tablesort 文档。

¥Note that tablesort provides alternative comparison implementations like numbers, filesizes, dates and month names. See the tablesort documentation for more information.

从文件导入表

¥Import table from file

插件mkdocs-table-reader-plugin允许您从 CSV 或 Excel 文件导入数据。

¥The plugin mkdocs-table-reader-plugin allows you to import data from a CSV or Excel file.