跳转至

VS Code 表格编辑

预计阅读时长 : 4 分钟

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

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

表格创建

创建表格是编辑表格的出发点，我们使用代码片段来快速实现这个需求。输入关键词 table，选择 x3、x4、x5 的列数即可进行快速创建。

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

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

表格操作

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

通过上述两个扩展的配合，可以使用 Tab 快速切换到下一个单元格并自动完成对齐操作。仅仅是这一个优化，就可以大大提升表格编辑的效率。

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

表格样式

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

Github 表格样式
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 调整表格为 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;
}

合并展示

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