概述

从小书匠 5.6.0 版本开始，添加了表格组件功能。这篇教程主要讲解了表格组件的原理及使用。

原有 markdown 表格语法的缺点

1. 单元格内不支持多行显示
2. 各种分隔符号，不方便输入
3. 不支持单元格对齐，只能对齐到列
4. 无法嵌套表格
5. 无法控制表格大小，特别是单元格，只能根据表格内容或者 css 样式调整

优点

1. 支持表格内换行
2. 支持合并单元格
3. 支持表格嵌套
4. 表格大小自定义

缺点

1. 目前只有小书匠编辑器的解析引擎支持表格组件，在其他编辑器上不兼容
2. 需要自己单独创建一个带表格的 HTML 文件

表格组件的工作原理

表格组件其实就是一个包含了表格(table 标签)的 HTML 文件。只要该 HTML 文件扩展名为 .table.html 或者 .table ，并做为该 markdown 文章的附件，通过 markdown 的图片语法进行引用，系统就会将该 markdown 文章里原本应该显示一张图片的内容替换成 HTML 文件里 table 标签范围内的数据。

实现表格组件条件

1. 扩展名为 .table 或者 .table.html 的文件
2. markdown 文章的附件，也就是以 ./ 开头的链接引用
3. HTML 文件内包含表格 table 标签
4. 必须是块级图片语法(也就是图片语法的上下各空一行，前后不能有其他文字)

什么是块级图片语法

所谓块级图片语法，是指在图片语法的前后不能有其他字符，并且上下各空一行。

类似下面的都不是块级图片语法

下面的才是标准的块级图片语法

表格组件语法示例

表格组件的语法使用的是 markdown 图片语法，唯一需要注意的是表格组件只能通过小书匠的上传入口，也就是内置数据库里的附件做为文件。图片语法里的文件扩展名以 .table 或者 .table.html 结尾的文件，才会被解析成表格组件。同时表格组件里的内容格式是需要标准的 html 片段，但不能包含 javascript 脚本 和 css 代码。解析器会自动过滤掉这些代码，再从 html 片段里提取出第一个带有表格标签的 html 块。

表格组件只能在块级的图片语法里生效，也就是在图片语法里要前后各空一行。

下面的代码是不会被解析成表格组件，而是当做普通的图片来处理

下面的代码会把文件里的表格数据解析出来

添加一个表格组件步骤

1. 使用其他编辑器，准备好一个带 table 标签的 HTML 文件，我们这里可以命名文件名为 demo.table.html。

2. 在小书匠编辑器里，新建一篇 markdown 文章，然后直接把刚才创建的 demo.table.html 拖拽到编辑器内。
3. 完成。可以直接在预览窗口内查看 demo.table.html 内的表格文件了。

查看生成效果

相关

小书匠语法说明之表格

小书匠表格组件编辑器使用说明