Skip to main content
小书匠
xx

小书匠语法说明之表格

小书匠语法说明之表格相关相关疑问疑问增强型表格增强型表格一个比较复杂的表格例子一个比较复杂的表格例子效果效果示例示例多表格身多表格身HTMLHTML效果效果示例示例多表格头多表格头HTMLHTML效果效果示例示例表格标题表格标题HTMLHTML效果效果示例示例列单元格合并列单元格合并HTMLHTML效果效果示例示例行单元格合并行单元格合并HTMLHTML效果效果示例示例如何打开增强型表格语法功能如何打开增强型表格语法功能普通表格普通表格表格内容对齐表格内容对齐效果效果示例示例常规用法常规用法效果效果示例示例概述概述

概述

小书匠除了支持基础的表格语法外，还对表格功能进行能增强，比如行合并单元格，列合并单元格，多表格头，多表格身等

普通表格

常规用法

示例

  1. 1First Header | Second Header 
  2. 2------------- | ------------- 
  3. 3Content Cell | Content Cell 
  4. 4Content Cell | Content Cell 

效果

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

表格内容对齐

示例

单元格左对齐

单元格左对齐    4行
  1. 1First Header | Second Header 
  2. 2:------------ | ------------- 
  3. 3Content Cell | Content Cell 
  4. 4Content Cell | Content Cell 
单元格右对齐    4行
  1. 1First Header | Second Header 
  2. 2------------: | ------------- 
  3. 3Content Cell | Content Cell 
  4. 4Content Cell | Content Cell 
单元格居中对齐    4行
  1. 1First Header | Second Header 
  2. 2:-----------: | ------------- 
  3. 3Content Cell | Content Cell 
  4. 4Content Cell | Content Cell 

效果

左对齐

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

右对齐

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

居中对齐

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

增强型表格

如何打开增强型表格语法功能

元数据 : grammar_tableExtra

  • 通过 小书匠主按钮>设置>扩展语法>增强型表格 进行全局控制
  • 通过每篇文章元数据进行开关控制 grammar_tableExtra

行单元格合并

如果单元格的右侧内容为空时，系统自动向右合并单元格。

系统也支持在前一个单元格输入 > ，来把当前的单元格合并到下一个单元格里。

示例

  1. 1First Header | Second Header 
  2. 2------------- | ------------- 
  3. 3行合并的单元格 |  
  4. 4Content Cell | Content Cell 
  5. 5 
  6. 6另一种方式 
  7. 7 
  8. 8First Header | Second Header 
  9. 9------------- | ------------- 
  10. 10> | 行合并的单元格 
  11. 11Content Cell | Content Cell 
  12. 12 

效果

First Header Second Header
行合并的单元格
Content Cell Content Cell

方式二

First Header Second Header
行合并的单元格
Content Cell Content Cell

HTML

  1. 1<table class="table-extra table table-striped table-celled"> 
  2. 2<colgroup> 
  3. 3<col> 
  4. 4<col> 
  5. 5</colgroup> 
  6. 6<thead> 
  7. 7<tr> 
  8. 8<th>First Header</th> 
  9. 9<th>Second Header</th> 
  10. 10</tr> 
  11. 11</thead> 
  12. 12<tbody> 
  13. 13<tr> 
  14. 14<td colspan="2">行合并的单元格</td> 
  15. 15 
  16. 16</tr> 
  17. 17<tr> 
  18. 18<td>Content Cell</td> 
  19. 19<td>Content Cell</td> 
  20. 20</tr> 
  21. 21</tbody> 
  22. 22</table> 

列单元格合并

在想要被合并的单元格添加 ^ 符号。

示例

  1. 1First Header | Second Header 
  2. 2------------- | ------------- 
  3. 3合并的列单元格 | Content Cell 
  4. 4^ | Content Cell 

效果

First Header Second Header
合并的列单元格 Content Cell
Content Cell

HTML

  1. 1<table class="table-extra table table-striped table-celled"> 
  2. 2<colgroup> 
  3. 3<col> 
  4. 4<col> 
  5. 5</colgroup> 
  6. 6<thead> 
  7. 7<tr> 
  8. 8<th>First Header</th> 
  9. 9<th>Second Header</th> 
  10. 10</tr> 
  11. 11</thead> 
  12. 12<tbody> 
  13. 13<tr> 
  14. 14<td rowspan="2">合并的列单元格</td> 
  15. 15<td>Content Cell</td> 
  16. 16</tr> 
  17. 17<tr> 
  18. 18 
  19. 19<td>Content Cell</td> 
  20. 20</tr> 
  21. 21</tbody> 
  22. 22</table> 

表格标题

在表格定义的结尾添加 [标题内容]

示例

  1. 1First Header | Second Header 
  2. 2------------- | ------------- 
  3. 3Content Cell | Content Cell 
  4. 4Content Cell | Content Cell 
  5. 5[表格标题内容] 

效果

表格标题内容
First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

HTML

  1. 1<table class="table-extra table table-striped table-celled"> 
  2. 2<caption>表格标题内容</caption> 
  3. 3<colgroup> 
  4. 4<col> 
  5. 5<col> 
  6. 6</colgroup> 
  7. 7<thead> 
  8. 8<tr> 
  9. 9<th>First Header</th> 
  10. 10<th>Second Header</th> 
  11. 11</tr> 
  12. 12</thead> 
  13. 13<tbody> 
  14. 14<tr> 
  15. 15<td>Content Cell</td> 
  16. 16<td>Content Cell</td> 
  17. 17</tr> 
  18. 18<tr> 
  19. 19<td>Content Cell</td> 
  20. 20<td>Content Cell</td> 
  21. 21</tr> 
  22. 22</tbody> 
  23. 23</table> 

多表格头

普通表格只能在 ---- 分界线的上方添加一个表格头，增强版的表格允许添加多个表格头

示例

  1. 1表格头1 | 表格头1 
  2. 2表格头2 | 表格头2 
  3. 3------------- | ------------- 
  4. 4Content Cell | Content Cell 
  5. 5Content Cell | Content Cell 

效果

表格头1 表格头1
表格头2 表格头2
Content Cell Content Cell
Content Cell Content Cell

HTML

  1. 1<table class="table-extra table table-striped table-celled"> 
  2. 2<colgroup> 
  3. 3<col> 
  4. 4<col> 
  5. 5</colgroup> 
  6. 6<thead> 
  7. 7<tr> 
  8. 8<th>表格头1</th> 
  9. 9<th>表格头1</th> 
  10. 10</tr> 
  11. 11<tr> 
  12. 12<th>表格头2</th> 
  13. 13<th>表格头2</th> 
  14. 14</tr> 
  15. 15</thead> 
  16. 16<tbody> 
  17. 17<tr> 
  18. 18<td>Content Cell</td> 
  19. 19<td>Content Cell</td> 
  20. 20</tr> 
  21. 21<tr> 
  22. 22<td>Content Cell</td> 
  23. 23<td>Content Cell</td> 
  24. 24</tr> 
  25. 25</tbody> 
  26. 26</table> 

多表格身

当表格内容部份有空行时，系统会生成多表格身效果。在 html 上就是生成多个 tbody

示例

  1. 1First Header | Second Header 
  2. 2------------- | ------------- 
  3. 3表格内容1 | 表格内容1 
  4. 4表格内容1 | 表格内容1 
  5. 5 
  6. 6表格内容2 | 表格内容2 
  7. 7表格内容2 | 表格内容2 

效果

First Header Second Header
表格内容1 表格内容1
表格内容1 表格内容1
表格内容2 表格内容2
表格内容2 表格内容2

HTML

  1. 1<table class="table-extra table table-striped table-celled"> 
  2. 2<colgroup> 
  3. 3<col> 
  4. 4<col> 
  5. 5</colgroup> 
  6. 6<thead> 
  7. 7<tr> 
  8. 8<th>First Header</th> 
  9. 9<th>Second Header</th> 
  10. 10</tr> 
  11. 11</thead> 
  12. 12<tbody> 
  13. 13<tr> 
  14. 14<td>表格内容1</td> 
  15. 15<td>表格内容1</td> 
  16. 16</tr> 
  17. 17<tr> 
  18. 18<td>表格内容1</td> 
  19. 19<td>表格内容1</td> 
  20. 20</tr> 
  21. 21</tbody> 
  22. 22<tbody> 
  23. 23<tr> 
  24. 24<td>表格内容2</td> 
  25. 25<td>表格内容2</td> 
  26. 26</tr> 
  27. 27<tr> 
  28. 28<td>表格内容2</td> 
  29. 29<td>表格内容2</td> 
  30. 30</tr> 
  31. 31</tbody> 
  32. 32</table> 

一个比较复杂的表格例子

示例

  1. 1|First Header | Second Header || 
  2. 2|First Header | Second Header | Third Header| 
  3. 3|------------- | -------------|-------------| 
  4. 4表身1Content Cell | Merge Content Cell|| 
  5. 5Content Cell | Content Cell| Content Cell| 
  6. 6 
  7. 7表身2Content Cell | Merge Content Cell|| 
  8. 8Content Cell | Content Cell| Content Cell| 
  9. 9[表格标题] 

效果

表格标题
First Header Second Header
First Header Second Header Third Header
表身1Content Cell Merge Content Cell
Content Cell Content Cell Content Cell
表身2Content Cell Merge Content Cell
Content Cell Content Cell Content Cell

疑问

相关

小书匠表格组件使用说明

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

Home
文档
价格
博客
Design by xsj 京ICP备13031371号