您的位置:

如何在markdown表格中合并单元格

一、 概述

在数据排版时,表格是很常见的一种展示方式。然而,在表格中存在合并单元格的需求,以使表格更加清晰易读。本文主要介绍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语法。读者还可以自己尝试不同的方法,看哪种方式更符合自己的需求。