小书匠表格组件使用说明

教程表格组件小书匠

概述

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

原有 markdown 表格语法的缺点

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

优点

支持表格内换行
支持合并单元格
支持表格嵌套
表格大小自定义

缺点

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

表格组件的工作原理

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

实现表格组件条件

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

什么是块级图片语法

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

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

上面一行包含了文字 
![](./a.jpg) 

前面包含了文字![](./a.jpg)后面也包含了文字 

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

上面空一行 
 
![](./a.jpg) 
 
下面也空一行 

表格组件语法示例

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

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

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

# 不会生效的表格组件 ![](./demo.table.html) 

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

# 上下要各空一行 
 
![](./demo.table.html)

添加一个表格组件步骤

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

demo.table.htmlhtml 20行

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title></title> 
</head> 
<body> 
  <table style="border-collapse: collapse;" border=1> 
    <tr> 
      <td rowspan=2>合并单元格</td> 
      <td>demo</td> 
      <td>demo</td> 
    </tr> 
    <tr> 
      <td colspan=2>合并单元格</td> 
    </tr> 
  </table> 
   
</body> 
</html> 

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

查看生成效果

小书匠表格组件使用说明

小书匠表格组件使用说明

概述

原有 markdown 表格语法的缺点

优点

缺点

表格组件的工作原理

实现表格组件条件

什么是块级图片语法

表格组件语法示例

添加一个表格组件步骤

查看生成效果

相关

公告