跳转至

VS Code 表格编辑

预计阅读时长 : 2 分钟

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

通过配合使用 Markdown TableMdTableEditor ⧉ 两个表格相关的扩展,我们能大体上实现接近 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 表格样式
/* 调整表格为 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