小书匠语法说明之表格 | 小书匠

概述

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

普通表格

常规用法

示例

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

效果

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

表格内容对齐

示例

单元格左对齐

单元格左对齐    5行

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

单元格右对齐    5行

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

单元格居中对齐    5行

1. First Header | Second Header 
2. :-----------: | ------------- 
3. Content Cell | Content Cell 
4. 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

居中对齐

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

增强型表格

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

元数据 : grammar_tableExtra

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

行单元格合并

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

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

示例

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

效果

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

方式二

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

HTML

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

列单元格合并

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

示例

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

效果

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

HTML

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

表格标题

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

示例

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

效果

表格标题内容

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

HTML

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

多表格头

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

示例

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

效果

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

HTML

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

多表格身

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

示例

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

效果

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

HTML

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

一个比较复杂的表格例子

示例

1. |First Header | Second Header || 
2. |First Header | Second Header | Third Header| 
3. |------------- | -------------|-------------| 
4. 表身1Content Cell | Merge Content Cell|| 
5. Content Cell | Content Cell| Content Cell| 
6.  
7. 表身2Content Cell | Merge Content Cell|| 
8. Content Cell | Content Cell| Content Cell| 
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

疑问

相关

表格组件