是否可以在 GitHub gist Markdown 的中心有一个表格？
Posted
技术标签:
【中文标题】是否可以在 GitHub gist Markdown 的中心有一个表格？【英文标题】：Is it possible to have a table in the center in a GitHub gist Markdown? 【发布时间】：2017-10-25 15:47:53 【问题描述】：如果可以，如何？
我使用以下语法在 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
我也试过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
以上三个版本的图片：
【问题讨论】：
老实说，您的问题令人困惑，尤其是当您说它消失时。您是否只想使用 Markdown 在中心放置一个表格？ 是的。表格应位于文档的中心。 您不能使表格居中，您可以使用<p> 方法创建一个伪表格，但不支持将表格居中的方法，因为它总是左对齐。 （这是在我花了几个小时试图将我的右对齐之后）
我所做的是，我制作了名为table.html 的快速文件并创建并在浏览器中打开它，我将图像保存为table.jpg，然后我使用<p align="right">，你可以使用居中，然后包含带有 html <img> 的图像。每次要更改表格时都必须更新图像，但这至少可以使您不仅正确对齐，而且还可以根据需要在表格图像周围浮动文本。
【参考方案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或id属性。有关完整的白名单，请参阅 sanitization filter。
鉴于上述情况，根本不可能为托管在 GitHub 上的文档定义自己的样式。也就是说，有些人希望能够在 Markdown 语法本身中定义样式。但是，原 Markdown rules 解释（强调添加）：
Markdown 的语法有一个目的：用作网络写作的一种格式。
Markdown 不是 HTML 的替代品，甚至更接近它。它的语法非常小，只对应非常小的 HTML 标记子集。我们的想法不是创建一种更容易插入 HTML 标记的语法。在我看来，HTML 标签已经很容易插入了。 Markdown 的想法是让阅读、编写和编辑散文变得容易。 HTML 是一种发布格式； Markdown 是一种书写格式。 因此，Markdown 的格式化语法只解决可以用纯文本传达的问题。
对于 Markdown 语法未涵盖的任何标记，您只需使用 HTML 本身。
由于它不是一种“发布格式”，因此提供一种样式化文档的方式超出了 Markdown 的范围。这给我们留下了 GitHub 明确禁止的方式。因此，无法在 GitHub 上将表格居中（或应用任何其他自定义样式）。
顺便说一句，虽然 GitHub 使用 CommonMark 规范（带有扩展名）而不是原始的 Markdown 规则，但我引用了原始规则，因为我引用的部分讨论了创建 Markdown 时做出的各种设计决策背后的哲学。 Markdown（和 CommonMark）的行为与该理念直接相关。虽然 CommonMark 规范没有参与设计决策（预计它何时与 Markdown 不同），但它确实 make reference 对我上面引用的段落中讨论的一些要点。它没有任何地方与这种哲学相矛盾。因此，我认为它与我们应该对 CommonMark 以及 GitHub Flavored Markdown 的组成部分和不组成部分的期望相关。
为了完整起见，让我们检查一下 OP 提供的每个示例。
first example 只是一个中间列对齐“中心”的表格。如果我们“查看源代码”（或使用浏览器的“检查”工具），我们会看到生成了以下 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" 仅定义在每行的中间单元格上。由于这种样式仅由子元素继承，而不是父元素，因此不会将其应用于整个表格。
顺便说一句，align 属性甚至没有在HTML5 spec 中提到（我可以找到）；但是，在HTML 4.01 spec 中，您可以在table 元素或其任何子元素上定义align 属性，然后仅由该元素的子元素继承。
当然，如上所述，Markdown 不提供一种机制来定义除单元格之外的任何内容的对齐方式。但即使您可以在table 元素上定义align，规范解释说“[t] 这个属性指定数据的对齐方式和单元格中文本的对齐方式。”
因此，if 仍然不会影响表格在其父元素中的定位方式。
second example 是一个包裹在<center> 元素中的表格。查看源 HTML 会发现 <center> 标记已被删除。
事实上，看一下 GitHub 的 whitelisted elements 就会发现 center 元素是不允许的并且被剥离了。
third example 尝试将表格包装在一个段落中，并在该段落上定义了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：
如果
p元素后面紧跟一个...table... 元素，则可以省略p元素的结束标记。
因此，该段落实际上并没有包裹table，而是由表格的开始标签隐式关闭。
但这让我很好奇。如果您使用div 而不是段落怎么办。但是那个makes no difference。正如我们之前建立的，align 属性只影响单元格文本。您需要分配 style 来更改页面上表格的位置，并且 Github 明确不允许定义您自己的样式。
【讨论】：
这个 Github 限制太烦人了。【参考方案2】：如下图所示，GitHub 会自动呈现表格，以便它们已经占据了整个宽度。正因为如此，您无法将 GitHub 的 Markdown 渲染器生成的文本居中（也就是说，表格真的非常肥大，技术上已经居中了）。
【讨论】：
【参考方案3】：可以将表格居中。本质上，在 GitHub 上，表格的宽度已经是 100%。您只需要为 tbody 提供足够的内容，它也会占用 100% 的宽度。
诀窍：用空格填充它。
<table>
<tbody>
<tr>
<td align="center">Key Features<br>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</td>
<td align="center">Examples<br>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</td>
<td align="center">Supported Methods<br>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</td>
</tr>
</tbody>
</table>
结果：
窄浏览器窗口：
【讨论】：
【参考方案4】：完全有可能！
<div align="center">
COLUMN 1 | COLUMN 2
:---: | ---:
center | right
</div>
<div>
【讨论】：
【参考方案5】：只需将 align="center" 添加到标签表中
<table align="center"></table>
【讨论】：
之前的答案之一已经证明了为什么这不起作用。以上是关于是否可以在 GitHub gist Markdown 的中心有一个表格？的主要内容，如果未能解决你的问题，请参考以下文章
markdown 你可以用Github上的Gists做什么？用法用途