Question

是否有可能在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

查看时是否可以将表格放在页面中央？

我已尝试使用https://stackoverflow.com/a/24639508/610569的建议：

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

<center>

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

</center>

查看时表格消失，请参阅https://gist.github.com/alvations/cd3495e7107b7701cf1cf1da2a839534

我还试过https://stackoverflow.com/a/12118349/610569：

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

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

但它仍在左侧，请参阅https://gist.github.com/alvations/23c18681df7a6bbf175d0e8c2cfccba3

以上所有3个版本的图片：

Answer 1

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

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

有几种方法可以为HTML定义自定义样式（Markdown生成），但GitHub不允许这样做。

一种方法是定义CSS规则。但是，在spec中，GitHub明确声明他们不允许<style>个标记。

另一种方法是在Markdown文档中包含原始HTML（带内联样式）。但是，出于安全考虑，GitHub对其允许的内容非常挑剔。在Markup项目中，他们定义了适用于他们支持的所有标记语言的过滤器（包括但不限于Markdown）。在相关部分，文档解释（强调添加）：

对HTML进行清理，积极删除可能会伤害您和您的亲属的内容，例如script代码，内嵌样式，class或{{1} }属性。有关完整的白名单，请参阅sanitization filter。

鉴于上述情况，根本无法为GitHub上托管的文档定义自己的样式。也就是说，有些人希望能够在Markdown语法本身中定义样式。但是，最初的Markdown rules解释了（强调添加）：

Markdown的语法仅用于一个目的：用作网络写作的格式。

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

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

因为它不是＆＃34;发布格式，＆＃34;提供样式样式的方法超出了Markdown的范围。这让我们了解GitHub明确禁止的方式。因此，无法在GitHub上居中（或应用任何其他自定义样式）。

顺便说一句，虽然GitHub使用CommonMark规范（带扩展名）而不是原始的Markdown规则，但我引用了原始规则，因为我引用的部分讨论了创建Markdown时所做的各种设计决策背后的哲学。 Markdown（和CommonMark＆＃39; s）的行为与该哲学直接相关。虽然CommonMark规范没有涉及设计决策（期望它与Markdown不同），但它对我在上面引用的段落中讨论的一些点做make reference。它无处与哲学相矛盾。因此，我认为这与我们对CommonMark的内容和内容的期望有关，并且通过扩展，GitHub Flavored Markdown。

对于完整性，让我们检查OP提供的每个示例。

first example只是一个中间列对齐的表格，＃34; center＆＃34;。如果我们＆＃34;查看来源＆＃34; （或使用浏览器＆＃34;检查＆＃34;工具），我们看到生成了以下HTML：
```
id
```
请注意，<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>仅在每行的中间单元格上定义。因为这样的样式只由子元素继承，而不是父元素，所以这不会作为一个整体应用于表。顺便说一下，HTML5 spec中没有提到align="center"属性（我能找到）;但是，在HTML 4.01 spec中，您可以在align元素或其任何子元素上定义align属性，然后该元素仅由该元素的子元素继承。当然，如上所述，Markdown没有提供一种机制来定义除细胞之外的任何东西的对齐。但即使您可以在table元素上定义align，该规范也会解释＆＃34; [t]他的属性指定数据的对齐方式以及单元格中文本的对齐方式。＆＃34 ; 因此，如果仍然不会影响表在其父元素中的定位方式。
second example是一个包含在table元素中的表格。查看源HTML后会发现<center>标记已被删除。事实上，看看GitHub的whitelisted elements会发现<center>元素不被允许并被删除。
third example尝试将表格包装在段落中定义center的段落中。但是，请注意（解释）HTML：
```
align="center"
```
根据 HTML5 spec：

如果<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>元素后面紧跟着p ...元素，则可省略p元素的结束标记。

因此，段落实际上并不包裹table，而是由表格的开头标记隐式关闭。

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

Answer 2

正如您在下图中看到的那样，GitHub会自动呈现表格，以便它们占据整个宽度。因此，你无法将GitHub的Markdown渲染器生成的文本居中（也就是说这个表真的很胖，技术上已经集中了）。

Answer 3

可以将表格居中。本质上，在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>

结果：

狭窄的浏览器窗口：

是否有可能在Github gist markdown中心有一张桌子？

3 个答案: