Table 表格语法¶

预计阅读时长 : 5 分钟

表格几乎是 Markdown 中最难以处理的样式，因为它需要考虑到对齐、换行、合并等多种情况，而且在不同的编辑器中，对表格的支持程度也不尽相同。

通过配合使用 Markdown Table ⧉ 和 MdTableEditor ⧉ 两个表格相关的扩展，我们能大体上实现接近 Excel 表格便捷操作效果。

表格创建¶

创建表格是编辑表格的出发点，我们使用代码片段来快速实现这个需求。输入关键词 table，选择 x3、x4、x5 的列数即可进行快速创建。当然，在 Cursor 中更简单的方式还是使用 Cmd+K 唤起 Composer，让 AI 帮我们快速生成一个。

为了最终呈现的美观，所有的表格模版全部默认采用居中对齐的样式。

1
2
3

| Column 1 | Column 2 | Column 3 |
| :------: | :------: | :------: |
|  第一列  |  第二列  |  第三列  |

Column 1	Column 2	Column 3
第一列	第二列	第三列

表格操作¶

VS Code 默认功能下编辑表格时，最头疼的便是纵列无法对齐，严重影响了查看数据单元格的效率。

为了解决这个问题，我们引入了 MdTableEditor ⧉ 和 Markdown Table ⧉ 两个扩展来提供增加功能。例如，通过 Tab 快速切换到下一个单元格并自动完成对齐操作。仅仅是这一个优化，就可以大大提升表格编辑的效率。

另外，还可以通过菜单或者快捷键，快速完成排序、合并、插入、删除等操作。

表格样式¶

在 MkDocs 中，默认的表格样式不太美观，可以通过自定义 CSS 来进行调整，以便和 Github 风格保持一致。

Github 表格样式
/* 调整表格为 Github 样式 */

th,
td {
  border: 1px solid var(--md-typeset-table-color);
  border-spacing: 0;
}

table tr th,
table tr td {
  border: 0px solid var(--md-primary-fg-color);
  border-right: 1px solid var(--md-typeset-table-color);
  font-size: 1em;
  margin: 0;
  padding: 5px 10px;
}

table tr th {
  font-weight: bold;
  background-color: var(--md-primary-fg-color);
  color: var(--md-default-fg-color);
  text-align: center;
}

/* 表格居中显示 */
.md-typeset__scrollwrap {
  margin: auto;
  text-align: center;
}

表格排序¶

参照官方教程对 Tablesort ⧉ 功能进行配置，可以实现表格的排序功能。

Method	Description
`GET`	Fetch resource
`PUT`	Update resource
`DELETE`	Delete resource

合并展示¶

Markdown 的表格默认不支持合并单元格，事实上合并之后也会影响增删改查以及排序等操作。但在特定的场景下，对于那些不经常修改的表格，我们也会有合并单元格美化展示效果的需求。

通过 Neoteroi - Spantable ⧉ 的扩展支持，我们可以实现如下的效果。

合并表格示例
Italy	40		20
	Men	Women	Men	Women
	78	82	77	81
Poland	40		20
	Men	Women	Men	Women
	78	82	77	81