20

是否可以在 GitHub gist Markdown 的中心有一个表格?如果是这样,怎么做?

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

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

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

但是表格向左冲,见https://gist.github.com/alvations/5095d3bcc0eec357c78f1c21a49e334f

查看时是否可以将表格置于页面中心?

我已经尝试过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>

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

我也尝试过如何在 GitHub 上的 README.md 中将图像居中?

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

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

但它仍然在左边,见https://gist.github.com/alvations/23c18681df7a6bbf175d0e8c2cfccba3

以上三个版本的图片:

在此处输入图像描述

4

5 回答 5

26

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

首先,请注意,在 GitHub Flavored Markdown规范中没有提到将任何样式应用于任何块级类型的能力(请参阅表格部分)。正如您的示例所示,您知道您可以在表格单元格中居中文本,但这仅适用于单元格并且对父表格没有影响(这是 HTML 和 CSS 的工作方式,并不特定于 Markdown 或 GitHub)。

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

一种这样的方法是定义 CSS 规则。然而,在规范中,GitHub 明确声明它们不允许使用<style>标签。

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

  1. HTML 被清理,积极删除可能伤害您和您的亲属的东西 - 例如script标签、内联样式class/或id属性。请参阅清理过滤器以获取完整的白名单。

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

Markdown 的语法有一个目的:用作网络写作的一种格式。

Markdown 不是 HTML 的替代品,甚至不能接近它。它的语法非常小,只对应非常小的 HTML 标记子集。我们的想法不是创建一种更容易插入 HTML 标记的语法。在我看来,HTML 标签已经很容易插入了。Markdown 的想法是让阅读、编写和编辑散文变得容易。HTML 是一种发布格式;Markdown 是一种写作格式。因此,Markdown 的格式化语法只解决了可以用纯文本表达的问题。

对于 Markdown 语法未涵盖的任何标记,您只需使用 HTML 本身。

由于它不是“发布格式”,因此提供一种样式化文档的方式超出了 Markdown 的范围。这给我们留下了 GitHub 明确禁止的方式。因此,无法在 GitHub 上将表格居中(或应用任何其他自定义样式)。


顺便说一句,虽然 GitHub 使用 CommonMark 规范(带有扩展)而不是原始的 Markdown 规则,但我引用了原始规则,因为我引用的部分讨论了创建 Markdown 时做出的各种设计决策背后的哲学。Markdown(和 CommonMark)的行为与该理念直接相关。虽然 CommonMark 规范没有涉及设计决策(预计它何时不同于 Markdown),但它确实参考了我在上面引用的段落中讨论的一些要点。它没有任何地方与这种哲学相矛盾。因此,我认为它与我们应该对 CommonMark 的组成部分和不包含的部分以及 GitHub Flavored Markdown 的期望相关。


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

  1. 一个示例只是一个中间列对齐“中心”的表格。如果我们“查看源代码”(或使用浏览器的“检查”工具),我们会看到生成了以下 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"仅在每行的中间单元格上定义。由于这种样式仅由子元素继承,而不是父元素,因此不会将其应用于整个表格。顺便说一句, HTML5 规范align中甚至没有提到该属性(我可以找到);但是,在HTML 4.01 规范中,您可以在元素或其任何子元素上定义属性,然后仅由该元素的子元素继承。当然,如上所述,Markdown 不提供一种机制来定义除单元格之外的任何内容的对齐方式。但即使你可以定义aligntablealigntable元素,规范解释说“[t]他的属性指定数据的对齐方式和单元格中文本的对齐方式。” 因此, if 仍然不会影响表格在其父元素中的定位方式。

  2. 第二个示例<center>是包含在元素中的表格。查看源 HTML 会发现该<center>标记已被删除。事实上,看一下 GitHub 的白名单元素就会发现,这些center元素是不允许的并且被剥离了。

  3. 第三个示例尝试将表格包装在段落中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 规范

    如果元素后面紧跟着一个...元素,p则可以省略元素的结束标记。ptable

    因此,段落实际上并没有包装table,而是由表格的开始标签隐式关闭。

    但这让我很好奇。如果您使用 adiv而不是段落怎么办。但这并没有什么区别。正如我们之前建立的,该align属性只影响单元格文本。您需要分配 astyle来更改页面上表格的位置,并且 Github 明确禁止定义您自己的样式。

于 2017-05-30T22:49:57.470 回答
10

正如您在下图中看到的,GitHub 会自动呈现表格,以便它们已经占据了整个宽度。正因为如此,你不能将 GitHub 的 Markdown 渲染器生成的文本居中(也就是表格真的非常胖,技术上已经居中了)。

markdown 表格宽度截图

于 2017-05-29T01:09:25.043 回答
4

可以使表格居中。本质上,在 GitHub 上,表格的宽度已经是 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>

结果:

自述文件示例

窄浏览器窗口:

窄浏览器示例

于 2020-04-07T19:48:21.310 回答
0

所以完全有可能!

 

在此处输入图像描述

<div align="center">
 
COLUMN&nbsp;&nbsp;&nbsp;1 |  COLUMN 2   
:---:  | ---: 
center | right

</div>
<div>
于 2022-01-16T10:48:51.483 回答
-2

只需将 align="center" 添加到标签表中

<table align="center"></table>
于 2021-11-17T15:53:33.710 回答