Markdown 表格

Markdown 表格语法

在 Markdown 中,表格用于展示结构化的数据。Markdown 提供了一种简单的方式来创建表格,虽然它的功能可能不如文字处理软件(如 Word)强大,但对于基本的表格展示已经完全足够了。

Markdown 的表格由行和列组成,我们可以使用中划线(-)创建分隔行,然后使用竖线(|)分隔单元格。

语法:

| 列1标题 | 列2标题 | 列3标题 |
| --- | --- | --- |
| 单元格1  | 单元格2  | 单元格3  |
| 单元格4  | 单元格5  | 单元格6  |

说明:

第 1 行定义表格的列标题,列标题与列标题之间使用 “|” 分隔。

第 2 行是分隔行,用于分隔标题行和数据行。分隔行中的连字符数量不影响表格的显示,但为了美观和规范,通常会与对应列的标题长度对齐。

从第 3 行开始,每一行代表表格中的一行数据。单元格与单元格之间也是使用 “|” 分隔。

此外,我们还可以在分隔行中使用冒号(:),可以指定列的对齐方式:

  • :---:左对齐(默认)。
  • :---::居中对齐。
  • ---::右对齐。

虽然 Markdown 并不强制横线数量(只要 >=3 即可),但为了保持视觉上的统一,最标准的写法是使用 “3 个横线”。

注意:

  • 表格的每一行应包含相同数量的单元格,即使某个单元格为空,也需要使用一个 “|” 来占位。
  • 不同 Markdown 编辑器 对表格的渲染效果会有一定差异。

Markdown 表格示例

接下来,我们通过几个简单的例子来介绍一下 Markdown 是如何定义表格的。

示例 1:Markdown 实现基本表格

| 学号 | 姓名 | 成绩 |
| --- | --- | --- |
| 张三 | 18  | 100 |
| 李四 | 17  | 95 |
| 王五 | 19  | 80 |

渲染效果如下图所示。

Markdown 定义基本表格

生成 HTML 代码如下。

<table>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>100</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>17</td>
            <td>95</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>19</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

分析:

从结果可以看出,Markdown 中的表格本质上最终会转换为 HTML 中的 table 标签。

示例 2:带有对齐方式的表格

| 学号 | 姓名 | 成绩 |
| :--- | :---: | ---: |
| 张三 | 18  | 100 |
| 李四 | 17  | 95 |
| 王五 | 19  | 80 |

渲染效果如下图所示。

Markdown 带有对齐方式的表格

生成 HTML 代码如下。

<table>
    <thead>
        <tr>
            <th style="text-align:left">学号</th>
            <th style="text-align:center">姓名</th>
            <th style="text-align:right">成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:left">张三</td>
            <td style="text-align:center">18</td>
            <td style="text-align:right">100</td>
        </tr>
        <tr>
            <td style="text-align:left">李四</td>
            <td style="text-align:center">17</td>
            <td style="text-align:right">95</td>
        </tr>
        <tr>
            <td style="text-align:left">王五</td>
            <td style="text-align:center">19</td>
            <td style="text-align:right">80</td>
        </tr>
    </tbody>
</table>

分析:

如果你的应用是一个 Web 应用,我们并不推荐使用在 Markdown 中指定列的对齐方式,因为这种方式是直接在标签内部使用行内样式进行设置,会导致代码冗余并降低代码可读性。

实际上,对于表格样式的控制,我们更推荐直接使用 CSS 来控制具体样式。对 CSS 有兴趣的小伙伴,可以查看:CSS 教程

上一篇: Markdown 列表

下一篇: Markdown 分割线

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号