一、 概述
在数据排版时,表格是很常见的一种展示方式。然而,在表格中存在合并单元格的需求,以使表格更加清晰易读。本文主要介绍markdown表格中如何实现单元格合并的方法。
二、 HTML 实体化
看过一些markdown教程的朋友们可能知道,markdown里没有直接的单元格合并语法。在markdown中使用HTML语法是最快的解决方案。不过需要注意的是需要实体化HTML代码,不然会出现markdown解析错误的情况。具体实体化方式如下:
<-- <td colspan="2"></td> -->
上述代码中,span属性指定了该单元格需要合并的列数,这里合并了2列,其它属性不再赘述。
三、用 : 调整列宽并合并单元格
首先,我们来看一下这样一个表格:
| text | text | text | | ---- | ---- | ---- | | text | text | text | | text | text | text |
其中| -|- |-| 行表示此表格的列样式。我们可以通过在第二个和第三个 | 之间使用 :(冒号)来调整每一列的宽度,如下:
| text | text | text | | :--: | :-: | --: | | text | text | text | | text | text | text |
上述代码中,:- 表示左对齐, -: 表示右对齐, :-: 表示居中对齐。这样,我们可以任意调整表格的列宽度。
现在,我们来看一下如何合并单元格。
| | text | text | | -| :-: | -: | | text | text | test | | | text | text |
通过在第一列的第二行和第三行保持空白,就可以将第二列的两个单元格合并为一个。
四、使用 HTML 表格标记
Markdown是衍生自HTML的一个工具,因此,markdown支持使用HTML语法,如果Markdown用起来不太好使,我们可以试试HTML增强markdown表格的功能。下面以一个例子来说明:
<table> <tr> <th rowspan="2">tr:0 td:0</th> <th>tr:0 td:1</th> <th>tr:0 td:2</th> </tr> <tr> <td colspan="2">td:1 ~td:2</td> </tr> <tr> <td>tr:2 td:0</td> <td>tr:2 td:1</td> <td>tr:2 td:2</td> </tr> </table>
通过上诉代码,我们可以实现以下这个表格:
tr:0 td:0 | tr:0 td:1 | tr:0 td:2 |
---|---|---|
td:1 ~td:2 | ||
tr:2 td:0 | tr:2 td:1 | tr:2 td:2 |
其中,属性 colspan 和 rowspan 同样是对合并单元格进行设置,可以更好的细化单元格的化单元格的合并。
五、使用扩展 markdown 语法
我们还可以使用 GitHub Flavored Markdown (GFM),即GitHub特有的Markdown语法。GFM的表格语法增加了符号|后的“ - ”和“ : ”符号,用来控制表格的对齐方式和宽度,同时,GFM还提供了表格的合并单元格语法。具体代码如下:
| Function | Description | | ------- | ----------- | | `help()` | Display help window | | `destroy()` | Destroy the window | | `quit()` | Quit the application | | `align_*()` | Align the window | | `resize()` | Resize the window | | `move()` | Move the window | | `hide()` | Hide the window | | `show()` | Display the window | | `maximize()` | Maximize the window | | `minimize()` | Minimize the window | | `restore()` | Restore the window | | `raise()` | Raise the window | | `lower()` | Lower the window | | `title(title_text)` | Set the title of the window | | `menu(menu)` | Set the menu | | `colour(colour)` | Set the colour | | `background(colour)` | Set the background colour | | `gradient(colour)` | Set the gradient colour | | `icon(icon)` | Set the window icon |
通过使用 GFM 的表格语法,表格会更加清晰易读。其中宽度调整方式和前面的方法相似,这里不再赘述。在这里我们着重介绍 `colspan` 和 `rowspan`的特性,如下:
| First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | | New Section | | | col 1 | col width two | | col width one, | col 2 | | col width one across two cols | copied |
上述例子中,我们在第6行的第一个单元格使用了 `colspan` 属性,从而强制让其宽度跨越两列。在第5行的第二个单元格我们同样使用了` row span` 属性使其高度跨越两行,代码写法如下:
表格代码: | First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | | New Section | | | col 1 | col width two | | col width one, | col 2 | | col width one across two cols | copied | 翻译结果: | 第一列 | 第二列 | | ----------- | ----------- | | Cell 1 | Cell 2 | | Cell 3 | Cell 4 | | 新的一列 | | | 跨越两列的第1列 | 跨越两行 | | 跨越两列的第2列 | 被复制 |
六、总结
本文介绍了几种在markdown表格中实现单元格合并的方法,包括HTML实体化、用:调整列宽并合并单元格、使用HTML表格标记和使用GFM语法。读者还可以自己尝试不同的方法,看哪种方式更符合自己的需求。