是否可以在 GitHub gist Markdown 的中心放置一个 table?

Is it possible to have a table in the center in a GitHub gist Markdown?

是否可以在 GitHub gist Markdown 的中心放置一个 table? 如果可以,怎么做?

我使用以下语法在 Markdown 文件上创建了 table:

 Somehow the table is always flushed to the left!!!

|Column1|Column1|Column1|
|:----|:----:|----:|
|Column1|Column1|Column1|

但是 table 向左冲洗,参见 https://gist.github.com/alvations/5095d3bcc0eec357c78f1c21a49e334f

是否可以在浏览时让table居中?

我已经尝试了 Is it possible to center tables in a markdown file? 的建议,使用:

Somehow the table is always flushed to the left!!!

<center>

|Column1|Column1|Column1|
|:----|:----:|----:|
|Column1|Column1|Column1|

</center>

并且table在查看时消失,见https://gist.github.com/alvations/cd3495e7107b7701cf1cf1da2a839534

我也试过了How do I center an image in the README.md on GitHub?:

Still on the left!!!
<p align="center">

|Column1|Column1|Column1|
|:----|:----:|----:|
|Column1|Column1|Column1|
</p>

但是还是在左边,看https://gist.github.com/alvations/23c18681df7a6bbf175d0e8c2cfccba3

以上三个版本的图片:

正如您在下图中看到的,GitHub 自动呈现 table,因此它们已经占据了整个宽度。因此,您无法将 GitHub 的 Markdown 渲染器生成的文本居中(又名 table 确实非常胖,技术上已经居中)。

简而言之,这是不可能的。 GitHub 不允许您定义自己的样式。

首先,请注意,在 GitHub Flavored Markdown spec (see the tables 部分中没有提及将任何样式应用于任何块级类型的能力。正如您的示例所示,您知道可以在 table 单元格内将文本居中,但这仅适用于单元格并且对父级 table 没有影响(这就是 HTML 和CSS 有效,并不特定于 Markdown 或 GitHub)。

有几种方法可以为 HTML(由 Markdown 生成)定义自定义样式,但 GitHub 不允许它们。

其中一种方法是定义 CSS 规则。但是,就在 spec 中,GitHub 明确指出他们不允许 <style> 标签。

另一种方法是在 Markdown 文档中包含原始 HTML(使用内联样式)。但是,出于安全原因,GitHub 对允许的内容非常有选择性。在 Markup 项目中,他们定义了应用于他们支持的所有标记语言(包括但不限于 Markdown)的过滤器。在相关部分,文档解释(强调):

  1. The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.

鉴于上述情况,根本不可能为 GitHub 上托管的文档定义您自己的样式。也就是说,有些人希望能够在 Markdown 语法本身中定义样式。然而,Markdown 原文 rules 解释(强调已添加):

Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.

因为它不是 "publishing format," 提供一种方式来设置文档的样式,所以它超出了 Markdown 的范围。这给我们留下了 GitHub 明确禁止的方式。因此,无法将 table(或应用任何其他自定义样式)置于 GitHub.

的中心

顺便说一句,虽然 GitHub 使用 CommonMark 规范(带有扩展)而不是原始的 Markdown 规则,但我参考了原始规则,因为我引用的部分讨论了各种设计决策背后的哲学创建 Markdown 时制作的。 Markdown(和 CommonMark)的行为与该理念直接相关。虽然 CommonMark 规范没有进入设计决策(预计它与 Markdown 不同的时候),但它确实 make reference 对我上面引用的段落中讨论的一些要点进行了讨论。它在任何地方都不会与该哲学相矛盾。因此,我认为它与我们对什么是 CommonMark 的一部分和什么不是 CommonMark 的期望相关,并且推而广之,GitHub Flavored Markdown。


为了完整起见,让我们检查一下 OP 提供的每个示例。

  1. first example 只是一个 table,中间列对齐 "center"。如果我们 "view source"(或使用浏览器的 "inspect" 工具),我们会看到生成了以下 HTML:

    <table>
        <thead>
            <tr>
                <th align="left">Column1</th>
                <th align="center">Column1</th>
                <th align="right">Column1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="left">Column1</td>
                <td align="center">Column1</td>
                <td align="right">Column1</td>
            </tr>
        </tbody>
    </table>
    

    请注意,align="center" 仅在每行的中间单元格上定义。由于此类样式仅由子元素而不是父元素继承,因此不会将其应用于整个 table。 另外,HTML5 spec (that I could find); however, in the HTML 4.01 spec 中甚至没有提到 align 属性,您可以在 table 元素或其任何子元素上定义 align 属性,然后继承仅由该元素的子元素。 当然,如上所述,Markdown 不提供一种机制来定义除单元格之外的任何内容的对齐方式。但即使您可以在 table 元素上定义 align,规范解释说“[t]his 属性指定数据的对齐方式和单元格中文本的对齐方式。” 因此,if 仍然不会影响 table 在其父元素中的定位方式。

  2. second example 是包裹在 <center> 元素中的 table。查看源代码 HTML 会发现 <center> 标签已被删除。 事实上,看一下 GitHub 的 whitelisted elements 就会发现 center 元素是不允许的并且被删除了。

  3. third example 尝试将 table 包装在段落中,并在该段落上定义了 align="center"。但是,请注意(解释)HTML:

    <p align="center"></p>
    <table>
        <thead>
            <tr>
                <th align="left">Column1</th>
                <th align="center">Column1</th>
                <th align="right">Column1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="left">Column1</td>
                <td align="center">Column1</td>
                <td align="right">Column1</td>
            </tr>
        </tbody>
    </table>
    <p></p>
    

    根据 HTML5 spec

    A p element's end tag may be omitted if the p element is immediately followed by an... table... element.

    因此,该段落实际上并未换行 table,而是被 table 的开始标记隐式关闭。

    但这让我很好奇。如果您使用 div 而不是段落会怎样?但是那个makes no difference。正如我们之前建立的那样,align 属性只影响单元格文本。您需要指定一个 style 来更改页面上 table 的位置,并且 Github 明确禁止定义您自己的样式。

可以将 table 居中。本质上,在 GitHub 上 table 已经是宽度 100%。您只需要给 tbody 足够的内容,让它也占据 100% 的宽度。

诀窍:用空格填充它。

<table>
  <tbody>
    <tr>
      <td align="center">Key Features<br>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;</span>
      </td>
      <td align="center">Examples<br>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;</span>
      </td>
      <td align="center">Supported Methods<br>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;</span>
      </td>
    </tr>
  </tbody>
</table>

结果:

窄浏览器window:

只需在标签中添加 align="center" table

<table align="center"></table>

完全有可能!

<div align="center">

COLUMN&nbsp;&nbsp;&nbsp;1 | </br>COLUMN 2 | </br></br>COLUMN 3
:--- | :---: | ---:
</br></br>left | center | </br></br>right
</div>

&nbsp; : Spacer
</br>  : Skip line
:---   : Left
:---:  : Center
 ---:  : Right