似乎很多人都试图在Stack Overflow问题中显示表格,但做得并不好。是否有Markdown语法支持创建适当的表?

评论

@Michael mmm,可以说,人们不会破坏表,因为在第一种情况下他们不使用表,因为功能不存在。尽管我不知道如何精确地实现表格数据,但有时可能会方便地呈现表格数据(将我在答案中显示的方式转换为真实的可能是一种可能性)

@Pekka当然,我并不反对,但是OP表示“似乎很多人试图在SO问题中显示表格,但做得并不好”,我没有真正看到

@Michael Mrozek-我遇到了性能比较或功能比较,这些比较或功能比较已融入代码格式。很高兴看到它们(和SQL帖子)的格式更好。

meta.stackexchange.com/questions/16356/…

通过@KennyTM的链接找到的另一种非SQL表用途:真值表

@Michael Mrozek-你在开玩笑吗?我每天都会看到多个表被篡改的例子。

他们是如何在MediaWiki上解决表格的:mediawiki.org/wiki/Help:Tables乍一看似乎有些复杂,但是如果仔细看一下,它一点也不差。与(不受支持的)html标记和代码块中的手动格式设置相比,它节省了很多键入工作。只需我的€0.02

@MichaelMrozek:“您有哪些人在修改表格的示例帖子?” electronics.stackexchange.com/a/42266/142

@MichaelMrozek:另一个例子,表可能会有用。我正在尝试对正则表达式的各部分进行编号,以使其更易于说明每个函数在做什么。简单的表格可以使水平对齐更加容易。

这是另一个示例:stackapps.com/questions/288/…

GitHub风味Markdown支持它们:github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables

我认为GitHub Flavored Markdown更适合像SO这样的编程网站。它还支持创建表

在这里,在2016年,仍然没有表格减价...我想stackexchange只是不在乎表格格式

为什么这种状态下降了?我看不出任何不应该实施的理由。

我们必须滥用代码块来伪造表以提供有关SQL问题的示例数据,这是完全不可接受的。为什么几年前还没有实施?

#1 楼

--------------------------------------------------
| No | Sadly        | There is none              |
--------------------------------------------------
| Except this, which is a poor alternative       |
--------------------------------------------------
| There really      | should be one              |
--------------------------------------------------


使用新的移动主题,代码块不再需要水平滚动,而需要换行。这使得像上面的示例这样的小表看起来也很糟糕,例如:


评论


Unicode箱形绘图可以改善这种情况;-)(Markdown源)

– Arjan
2011年8月20日12:40



但是,请参见精彩的将文本格式设置为表格Web应用程序,以轻松创建ASCII艺术表格。

–杰伊·莱维特(Jay Levitt)
2012年4月1日22:30

确实在android上没有等宽字体,所以更糟:(

–罗里
2012年4月5日14:50

@Rory,我刚刚在Android 2.3.x和4.x上进行了测试,并且都支持等宽。

– Arjan
2012年4月14日上午10:26

@Arjan在这里回答Jeff的问题,但是您是对的,它现在也在我的android上运行xD

–罗里
2012年4月14日10:29



@Arjan:在FF12 / Windows上,Unicode框图看起来不好。 ASCII看起来不错。

– nhahtdh
2012年7月7日在18:04

而且,@ nhahtdh,Unicode框图也需要一点空间,这甚至使示例中的小表都在Nexus S上折断(纵向)。

– Arjan
2012年7月7日在19:08

(嗯,移动设备不再在我的Android 4.2.2的Chrome浏览器中使用固定宽度的字体;普通的浏览器运行良好,iOS的Chrome浏览器和Mobile Safari也能正常工作。有一天需要进行调查...)

– Arjan
2014年2月9日在8:11



这适用于stackedit.io/editor,接受的答案不正确

–加布
16年4月20日在17:05

@JayLevitt您链接的页面已移至该地址。请考虑相应地编辑您的评论。

–卢克
17年1月24日在8:21



@iONinja,现在地址在这里

– Fezter
17年7月31日在23:02

我很喜欢回到这篇文章,并在需要时随时复制表格:)

– RBT
18年1月4日,0:42

我发现此工具对格式化utf-8表非常有用:tablesgenerator.com/text_tables。示例:stackoverflow.com/a/44103020/5091346

–安德里·阿布拉莫夫(Andrii Abramov)
18-11-15在21:31

#2 楼

这取决于正在使用哪个Markdown库Stack Overflow,但这在Reddit上有效。也许他们应该分享笔记。

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |    aligned   |


评论


看起来像Markdown的MultiMarkdown实现。

– Stefan Lasiewski
2012年1月10日的1:49

reST的简单表很不错:docutils.sourceforge.net/docs/user/rst/quickref.html#tables,但SE应该坚持使用某些markdown实现

– Endolith
2012年10月10日13:44



对!这也可以在github风格的markdown中使用:Markdown备忘单·adam-p / markdown-here Wiki

–nealmcb
2013年9月29日13:52

鉴于新的表格功能,这种格式现在可以正常使用!

–zcoop98
20 Dec 9'在20:58

#3 楼

在Meta的其他地方,我曾经学习过漂亮的Senseful Solutions Format Text as Table工具,现在可以在ASCII Table Generator中使用相同的功能。当然:



它根本不可访问,因此不能替代真正的表。
这不是Markdown。
这是一个额外的步骤。
生成的ASCII表如果太宽,则不能在移动设备上很好地工作,因为移动主题包装代码块而不是显示滚动条。 ,它支持不同格式:

+------------+---------+
|    Type    |  MySQL  |
+------------+---------+
| Header     | Top Row |
| Auto Align | On      |
+------------+---------+




+------------+---------+
| Type       | MySQL   |
| Header     | None    |
| Auto Align | On      |
+------------+---------+




+---+------------+-------------+
|   |     A      |      B      |
+---+------------+-------------+
| 1 | Type       | MySQL       |
| 2 | Header     | Spreadsheet |
| 3 | Auto Align | On          |
+---+------------+-------------+




╔═══╦════════════╦═════════════╗
║   ║ A          ║ B           ║
╠═══╬════════════╬═════════════╣
║ 1 ║ Type       ║ Unicode Art ║
║ 2 ║ Header     ║ Spreadsheet ║
║ 3 ║ Auto Align ║ Off         ║
╚═══╩════════════╩═════════════╝


手动创建Unicode箱形图可提供更多控制和圆角:

╭───╥────────────┬─────────────╮
│   ║     1      │     2       │
╞═══╬════════════╪═════════════╡
│ A ║ Type       │ Manual      │
│ B ║ Header     │ Anything    │
│ C ║      Align │        Sure │
└───╨────────────┴─────────────┘


即使是由于灰色背景,我还是会觉得很丑。 Unicode字符在不同的浏览器/设备上的呈现方式也不同:



评论


@OldCheckmark也许可以将其包装在span或div中,或者告诉文本nowrap的东西?

–科尔·约翰逊(Cole Johnson)
13年8月23日在8:19

@Asad,如果该编辑是有意的,那么该是检查字体的时候了。您的编辑使最后一个示例在Mac上的所有浏览器中都呈现不好的效果,我什至启动了Internet Explorer,看到的结果比通常显示的结果(在Mac上的Parallels)更丑陋。另外,在计算组成一列的字符数时,您的编辑对我来说没有任何意义。

– Arjan
13年8月23日在8:20

@Arjan是吗?我知道那里有包装纸。我是说用style =“ white-space:nowrap;”将其包装在HTML元素中。这将禁用包装。它将被推离页面,您只需向右滚动即可看到它。

–科尔·约翰逊(Cole Johnson)
13年8月23日在8:25



呵呵,对不起,我的意思是OldCheckmark,而不是您@Cole ...重新发布和清理。 (以某种方式您的评论潜入了我的编辑和我的第一条评论之间!)

– Arjan
13年8月23日在8:41

在我的Mac上,该Unicode方框图看起来不错,但在Internet Explorer(在该Mac上为Parallels)上却没那么多。而且由于包装而不是滚动代码块,所有这些在移动设备上看起来都很糟糕。所以:@OldCheckmark,不要浪费时间。

– Arjan
13年8月23日在8:42

顺便说一句,@ Cole故意引入了移动包装,因为滚动不可靠。

– Arjan
13年8月23日在8:44



@Arjan我在办公室计算机上运行Win7,原始顶部显示在左侧,但由于某种原因,现在我的家用计算机(也包括Win7)看起来还可以。对于那个很抱歉。

–user200500
13年8月23日在9:04

Windows上最新的Chrome字体用于这些框字符,无论哪种字体都使最后一个看起来很糟糕。编辑(现已回滚)没有帮助;它没有任何一种排列。

–科迪·格雷
13年8月23日在9:16

@CodyGray那就是我所看到的。编辑后,它对我来说似乎略好一些,尽管仍然脱节。不知道为什么会这样,特别是因为字体应该是等距的。

–user200500
13年8月27日在23:06

另请参阅移动版本,其中行尾的某些字符需要换行,而其他字符不需要@Asad。当然很奇怪!

– Arjan
13年8月27日在23:21

将表格式化为代码块以保留格式的一种更简单的方法是用```块将其包围

– Stevoisiak
17年5月5日在18:18



有意义的.github.io / text-table

– daugaard47
20 Jan 24'5:45

#4 楼

您可以执行以下操作:

Header 1Header 2Header 3Cell 1单元2单元3单元3单元3单元4单元4单元5单元6单元6单元7单元
/> header1header2header3cell ----- 1cell ----- 2cell ----- 3cell ----- 4cell ----- 5cell ----- 6

第三个:

header1header2header3cell ----- 1cell ------ 2cell ----- 3cell ----- 4cell ------ 5cell ----- 6

好吧,我只认真对待第一个。虽然如果您检查代码,则需要一些漂亮的  s:/

评论


解决方法现已损坏:)

– Badp
2012年5月10日22:13



-1,鼓励人们滥用[tag:]格式设置选项只会导致问题。

– gung-恢复莫妮卡
13年8月12日在3:33

@gung:“好的,我只认真对待第一个。”

– Ry-
13年8月12日在3:56

On mobile, both the   magic and wrapping for small screens would also be a problem.

– Arjan
Aug 12 '13 at 8:21

不同的比例字体是不同的。不错的尝试,但结果可能会不一致。

– Frungi
2014年5月27日下午4:43

对于语义标记或可访问性而言,滥用元素并不是那么重要。

–安德鲁·马歇尔(Andrew Marshall)
15年2月3日,0:48

下面的@JackDouglas通过将kbd与代码结合起来,提出了一个更好的解决方案,从而消除了对不间断空格的需求,该空格只能部分对齐单个单元格。即使在您的屏幕上看起来还可以,在其他操作系统上看起来也不一样。将此与比例字体代码结合使用可使事情变得可靠。

– Robert Koritnik
2015年2月10日,9:13

@Arjan,这比图像更好,因为它是文本。您可以Ctrl-F图像吗?

–起搏器
15年7月15日在1:41



怎么样?请包括确切步骤

– VivekDev
2015年12月21日在4:57



你真的很聪明;)

– yukashima huksay
17年7月7日在7:45

如果将文本括在反引号中的KBD标签内,则可以使用等宽字体并获得完美的列对齐方式,即`Header 1`

–ccpizza
18年5月13日在13:14



#5 楼

更多<kbd>的可憎之处:


姓氏DonaldMickyRoger

姓DuckMouseRabbit



First Name Last Name

评论


+1,巧妙,但这可在所有浏览器中访问吗?

–起搏器
2014年6月25日23:52



它们在台式机Chrome / IE / FF上看起来都不错,但第二个在移动设备上(至少在iOS上)下降了。

–杰克·道格拉斯(Jack Douglas)
14年6月26日在6:53

您的第一个示例是唯一可以在Android版Chrome浏览器上正确呈现的示例,尽管其他许多示例都可以在Stack Exchange移动应用程序上正确呈现。

–丹尼斯
2014年9月15日12:00

截图:i.imgur.com/whRjFHk.png

–丹尼斯
2014年9月15日12:10

+1 kbd +代码组合似乎是完美的,因为所有列都可以完美且轻松地对齐,并在使用各种不同字体的浏览器和操作系统中保持一致。代码实际上添加了所需的比例字符大小。

– Robert Koritnik
2015年2月10日9:09



在这里做了一个。

– Kenorb
15年8月6日在18:38

对对对 - - -

– Pekka
15年12月28日在9:32

哇,我不认识罗杰·兔子(Roger Rabbit)。

– AndreiRînea
18年5月21日在20:56

#6 楼

Stack Overflow不支持MathJax,但是网络上的多个站点都支持,包括stats.SE和math.SE(请参见此处的完整列表)。使用MathJax,您可以使用array创建表:
\begin{array} {|r|r|}
\hline
1 &2 \
\hline
3 &4 \
\hline
\end{array}

翻译为: SO也不支持MathJax,但是如果可以实现,就可以在SO和meta.SO上创建表。)

评论


我在某处看到一个开发人员说,MathJax的JS库重几个兆字节,因此带宽成本巨大,不值得在Stack Overflow上使用它的罕见情况。我感觉合理。 :)

–影子向导正在接种疫苗
13年8月12日在6:13

结果可能不错,但是对于编辑,恐怕我甚至比上面更喜欢ASCII表。就像@ShaWizDowArd已经写过的一样,该团队在某些场合写道:“尽管如此,它永远不会出现在Stack Overflow上,因为它是一个极其沉重的依赖项”(2010年8月)。请注意,移动浏览器也需要能够呈现它。

– Arjan
13年8月12日在7:52



@Arjan关于最后一部分,移动主题可以轻松排除那些库,它已经排除了很多东西。我坚信支持MathJax的网站已经存在这种情况,即使用移动主题时,您将无法使用这种魔力。 :-)

–影子向导正在接种疫苗
13年8月12日在7:54



但是,然后,@ Sha,我们将看到源代码……?

– Arjan
13年8月12日在7:55

@Arjan刚刚检查了一下,在移动主题中根本没有预览,问题已解决。 ;)

–影子向导正在接种疫苗
13年8月12日在7:58



不,@ Sha,我的意思是最终结果。如果我在移动设备上查看帖子,并且其中包含需要一些排除的JavaScript才能呈现的语法...

– Arjan
13年8月12日在8:04



移动设备在此处显示它:math.stackexchange.com/questions/465599/about-x-0-1-1-1-x0,因此其中包含了JavaScript,@ Sha。 (尽管在我较旧的Nexus S上速度较慢。)

– Arjan
13年8月12日在8:06



@Arjan hmm ...很好,猜想也可以将其包含在移动主题中。

–影子向导正在接种疫苗
13年8月12日在8:13

@Sha,在旧版Nexus S上的Chrome中,有趣的3个清晰可见的渲染步骤序列。

– Arjan
13年8月12日在8:49

@Arjan桌面浏览器也可以。不是Chrome。它是渲染引擎。那就是除了使用Blink的台式机(我相信是android)以外的所有地方的WebKit。基于WebKit,Blink在WebKit的许多“怪癖”中“受挫”。

–科尔·约翰逊(Cole Johnson)
13年8月23日在8:22

您的权利@Cole,但对我来说,台式机浏览器仅比旧的Nexus S快得多。但是,确实,两者都需要执行JavaScript处理,最终两者都可以正常显示。 (直到那时,我仍然认为Markdown源是可怕的。而且,就像任何非表解决方法一样,它是不可访问的。)

– Arjan
13年8月23日在10:24

在rpg.stackexchange.com上工作

– aloisdg移至codidact.com
18年5月14日在8:53

#7 楼

简短的答案是Markdown Extra中对表有一种Markdown支持-令我们惊讶的是,尽管我们拥有GitHub,但该线程尚未提及(根据Ctrl + F搜索)提到了带有Markdown的Markdown。

这已经实施了很长时间了,“语法”是众所周知的。有人认为这将是对SO / SE的一种简单有效的增强。另外,转到Markdown Extra也将带来定义列表-甚至脚注(hurrah!)。1;)

1 SO可能不需要'em,但SE绝对可以!另外,现在请参见58次UV编辑(截至撰写本文时)“是时候分叉减价了吗?”,这明确地引起了人们对脚注和表格支持的关注。

评论


是的,但是一切都是一成不变的。什么都不能改变。

–P.Mort。 -忘记了粘土Shirky_q
20年1月13日在1:08

#8 楼

您可以像下面的格式一样在tablegenerator上生成文本表。文件->导入CSV文件
或者您可以手动生成表格

在这里您可以将列值对齐到左,右,中心。表边框

+----+-------------+--------+-------+-----+
| id | name        | gender | state | age |
+----+-------------+--------+-------+-----+
| 1  | John Kenedy | male   | NY    | 32  |
+----+-------------+--------+-------+-----+
| 2  | Meresa Oslo | female | HI    | 26  |
+----+-------------+--------+-------+-----+
| 3  | Mike Lanes  | male   | FL    | 25  |
+----+-------------+--------+-------+-----+


表边框使用Unicode符号

╔════╦═════════════╦════════╦═══════╦═════╗
║ id ║ name        ║ gender ║ state ║ age ║
╠════╬═════════════╬════════╬═══════╬═════╣
║ 1  ║ John Kenedy ║ male   ║ NY    ║ 32  ║
╠════╬═════════════╬════════╬═══════╬═════╣
║ 2  ║ Meresa Oslo ║ female ║ HI    ║ 26  ║
╠════╬═════════════╬════════╬═══════╬═════╣
║ 3  ║ Mike Lanes  ║ male   ║ FL    ║ 25  ║
╚════╩═════════════╩════════╩═══════╩═════╝


这里是Markdown表

| id | name        | gender | state | age |
|----|-------------|--------|-------|-----|
| 1  | John Kenedy | male   | NY    | 32  |
| 2  | Meresa Oslo | female | HI    | 26  |
| 3  | Mike Lanes  | male   | FL    | 25  |


#9 楼

CommonMark是Markdown的严格指定版本,它确实支持内联HTML表。 Stack Exchange Valued Associates过去曾表示,他们最终打算迁移到CommonMark,并且确实支持包含HTML表的内联HTML块: #html-blocks

但是,在最初使用的markdown实现中不允许这样做的主要原因是由于用户可以轻松地使用嵌入式HTML表格破坏页面布局。由于Stack Exchange允许新用户在页面上发布内容,因此认为赋予他们这种功能太大的风险。

他们可能将实现CommonMark并仍然禁用内联HTML表由于这个原因或其他原因。在审核和一些常见的布局中断表编码之间,我希望它们能够启用它们。交换内容列表。

评论


我会在“经验丰富的建议”之类的网站上找到特别有用的表格,在这些表格中,通常在需要帮助的问题中引用食谱。

–Catija♦
15年7月14日在16:45

“用户使用内联HTML表格可以轻松地中断页面布局”,您可以对代码块执行相同的操作。只需将表放在带有滚动条的盒子中,就像巨大的代码块一样。

– Endolith
17年5月12日在14:11

“ ...可能在明年左右,我们将可以访问适当的HTML表...”-三年后,没有表。 :(

–托尼
18年6月13日在2:14

看到新的公告:我们正在切换到CommonMark

– V2Blast
20年6月1日在16:01

#10 楼

最近,在Stack Overflow文档Beta-示例部分的降价编辑工具中引入了Table选项。



评论


我认为我们可以确定以后再回来。

– aloisdg移至codidact.com
17年11月24日在22:45

Stackoverflow文档Beta已关闭。

– koppor
18 Mar 19 '18 at 12:14

很高兴知道他们一直在使用此功能-希望他们能将其带回来!

–布莱恩·伯恩斯(Brian Burns)
18/12/6在12:53

#11 楼

我们可以使用Stack Overflow HTML呈现:




 <table style="border-collapse:collapse;border-spacing:0"><tr><th style="font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">url</th><th style="font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">id</th></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">codegolf.stackexchange.com</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">0</td></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">https://codegolf.stackexchange.com/q/148927/15214</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">1</td></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">https://en.wikipedia.org/wiki/Code_golf</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">2</td></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">lichess.org</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">3</td></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">https://en.wikipedia.org/wiki/Code_poetry</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">4</td></tr></table> 





我使用tablegenerator创建此代码段。

我们可以隐藏JavaScript和CSS内容,但是如果我们隐藏HTML,则会丢失输出。有其他隐藏内容的方法,请参阅:如何隐藏/显示我创建的问题的一部分。

评论


是的,但需要访客单击按钮才能查看表格。这是主要的缺点。

–影子向导正在接种疫苗
17年11月24日在22:06

@ShadowWizard确实是,但是它仍然是替代品

– aloisdg移至codidact.com
17年11月24日在22:10

没错,我没有拒绝投票,只是指出了这种替代方案的不利之处。 :)

–影子向导正在接种疫苗
17年11月25日在0:33

#12 楼

如果我正确地阅读了Markdown语法页面(然后搜索“表格”),则可以使用常规HTML表格标签,并在<table></table>标签周围加上额外的空白行。 las,我没有在meta上运行它。如果有人发现了反馈,我们将不胜感激。

评论


正确:Markdown包含表,但是SE不支持Markdown的那一部分(有一点它在实时预览中有效,但是我很长时间没有尝试过)。

–理查德
2010-12-31 8:55

对于将来的读者:HTML
标记明显不起作用,以阻止人们破坏整个页面的布局。请参阅Shog9关于此问题的答案。

– Peter Cordes
16 Jan 29'9:43



#13 楼

真烦人。特别是,正如bernd_k所指出的那样,还有与数据库有关的问题。我们目前唯一的解决方案是使用我们最好的ASCII艺术技能。为避免移动布局混乱,不必一定将表格的宽度一直向右扩展:

Header1 | Header2 | Header 3
--------+---------+----------
0       | 1       | 7
2       | 5       | 3
9       | 7       | 2


#14 楼

至少对于GitHub Flavored Markdown,它支持表。阅读有关此问题的答案后,我本来非常灰心。我很高兴可以使用HTML解决方法,但是绝对可以避免人类可读的源代码。然后,我在GitHub Flavored Markdown中找到了对表的支持的以下描述,当我使用R Markdown创建内容时,它也对我有用。

https://github.com/adam-p/markdown-这里/ wiki / Markdown-Cheatsheet#wiki-tables

这里是该网站上的表格示例的副本,我也发现它在GitHub或R Markdown用例中非常有用多数使用markdown:



表不是Markdown核心规范的一部分,但它们是GFM的一部分,Markdown Here支持它们。它们是将表添加到电子邮件中的简便方法,否则将需要从其他应用程序进行复制粘贴。

冒号可用于对齐列。

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | 00 |
| col 2 is      | centered      |    |
| zebra stripes | are neat      |     |


外部管道(|)是可选的,您无需使原始Markdown排列整齐。您还可以使用嵌入式Markdown。

冒号可用于对齐列。

| Tables        | Are           | Cool |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | 00 |
| col 2 is      | centered      |    |
| zebra stripes | are neat      |     |


外部管道(|)是可选的,并且您无需将原始的Markdown排列整齐。您还可以使用嵌入式Markdown。

评论


什么是HTML解决方法?像aloisdg的答案一样?

–P.Mort。 -忘记了粘土Shirky_q
18年7月16日在12:47



#15 楼

一种替代方法是将HTML表格标签放在ꜱᴠɢ文件中,因为ꜱᴠɢ文件基于XML,所以它可以包含XHTML内容。从那里可以使用HTML标记。
这还使您可以使用任意CSS内容设置边框样式。禁用HTML的标签为<iframe><script><input><video><audio>。 :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="1000px" preserveAspectRatio="none">
    <defs>
        <style type="text/css"><![CDATA[
            svg
            {
                background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgb25Mb2FkPSJhbGVydCgnaGVsbG8gd29ybGQhJykiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij48IVtDREFUQVsKICAgIGFsZXJ0KCJoZWxsbyB3b3JsZCEiKTsKICBdXT48L3NjcmlwdD4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMTYlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZjhmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQlIiBzdG9wLWNvbG9yPSIjZmFmZGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzNCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmMmY4ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiNlZGY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlMGYwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NiUiIHN0b3AtY29sb3I9IiNkM2VhZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNjOWU1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NSUiIHN0b3AtY29sb3I9IiNiN2RjZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2OSUiIHN0b3AtY29sb3I9IiNhZGQ3ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiNhM2QyZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4NyUiIHN0b3AtY29sb3I9IiM2ZGI0ZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NiUiIHN0b3AtY29sb3I9IiMzMjljZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMxOTkwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA4M2ZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij48IVtDREFUQVsKICAgIGFsZXJ0KCJoZWxsbyB3b3JsZCEiKTsKICBdXT48L3NjcmlwdD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgogIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij48IVtDREFUQVsKICAgIGFsZXJ0KCJoZWxsbyB3b3JsZCEiKTsKICBdXT48L3NjcmlwdD4KPC9zdmc+Cg==);
            }
        ]]></style>
    </defs>
    <foreignObject width="100%" height="100%" opacity="1">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>anti 404 error example</title>
            </head>
            <body>
                <h1>Found !</h1>
                <p>The requested URL /fghjkl was found on this server.</p>
                <table border="1" cellpadding="1" cellspacing="2">
                    <tr>
                        <th>Name</th>
                        <th>Cups</th>
                        <th>Type</th>
                        <th>Sugar</th>
                    </tr>
                    <tr>
                        <td>Wendy</td>
                        <td>10</td>
                        <td>Regular</td>
                        <td>yes</td>
                    </tr>
                    <tr>
                        <td>Jim</td>
                        <td>15</td>
                        <td>Decaf</td>
                        <td>no</td>
                    </tr>
                </table>
            </body>
        </html>
    </foreignObject>
</svg>


在Internet Explorer和Safari> 9中均不起作用。

随意使用带有[this url](view-source:http://ytrezq.sdfeu.org/test.svg)<tr>

评论


在OSX上使用Chrome 44.0时,表格很小,但是在新标签页中打开时看起来更好。在Firefox中工作正常。在这里报道。

– Kenorb
15年8月18日在18:10



@kenorb,此功能与Windows上的chrome 43完美配合。如果在新标签页中打开这样的图像,则可能最终运行的是javascript或它可能包含的插件”,而从标记加载时却没有。

–user2284570
15年8月18日在18:12



@kenorb的替代方法是对Adobe Flash Player文件执行相同的操作,然后使用ActionScript 2.0在页面上注入任意html。

–user2284570
15年8月18日在18:18



看起来不错,但不支持复制和粘贴。

– CJBS
16年4月7日在17:50

@CJBS是的,您需要该页面的源代码。

–user2284570
16年4月8日在21:04

#16 楼

在SO上,我经常看到一些用SQL标记的问题,这些问题以表格形式表示它们的测试数据。我希望OP仅使用create table和insert语句。

这样可以更轻松地验证他/她的问题或尝试验证解决方案。

评论


与在问题和答案中显示表格数据有什么关系?

–ChrisF♦
2010-12-30 14:45

在SO中,经常会遇到有关sql的问题,其中示例数据以表格形式给出。如果您想提供帮助,则需要先进行转换。

–bernd_k
2010-12-30 14:47

您可能想用评论中的前提来更新您的答案。由于这是对您在评论中描述的特定问题的合法解决方案,因此可能有助于避免投票不足。

– tvanfosson
2010-12-30 14:50

SQL发布以这种方式显示数据,因为数据库通常以ascii表格格式输出数据,而它们只是复制/粘贴数据。即使实际表存在于SO的降价促销中,当用户已经以其他方式获取数据后,用户不太可能会花时间手动创建它们

– Michael Mrozek
2010-12-30 15:08

+1我完全同意。对于SQL帖子来说,很好的修饰符(例如Ben Shelock的答案)只是在尝试使用数据设置测试表时遇到麻烦。诸如此类的问题仅在建立测试环境时就对潜在的应答者进行了大量工作。对于我来说,DDL和insert语句或带有select语句和UNIONS的CTE是理想的此类问题。

–马丁·史密斯
2011年1月1日,0:56



#17 楼

您可以使用Box Drawing Unicode来创建表。

此答案可以帮助新用户了解Unicode键与所需Box-制图Unicode的用法。以下Unicode是必不可少的:

1。两条线:


水平U + 2501

垂直U + 2503


2。四个角:


左上角U + 250F

右上角U + 2513

左下角U + 25 br />

右下角B U + 251B

通过使用它,您可以画出类似以下的框: >但是要创建列和行,它需要以下T:


3。用于创建列:


顶端U + 2533


底端U + 253B

示例:

┏━━━┓
┃ 1 ┃
┗━━━┛



4。用于创建行:


左端U + 2523


右端U + 252B

示例:

┏━━━┳━━━┓
┃ 1 ┃ 2 ┃
┗━━━┻━━━┛



5。用于在所有侧面(左+右+顶部+底部)提供甲酸的盒子:示例:

┏━━━┓
┃ 1 ┃
┣━━━┫
┃ 2 ┃
┗━━━┛




因此,最后,借助此Box Drawing Unicode,我们可以创建无限行和列的表! br />
注意:在此答案中,使用了粗线。要使用其他线条样式,请访问表格或官方代码表。

评论


你好。您是否知道您的表在IE 11中看起来像这样?

–百富勤
16 Sep 7'在3:09



@PeregrineRook显然,您的IE使用的是非等宽字体代码。

–俄罗斯
19-3-22在14:33



@Ruslan:嗯,我想说这太过简单了。 Internet Explorer显示i,l,|和W一样的宽度就好了。例如,Pëkka的答案可以正确呈现(桌子上有一个笔直且对齐的右边框)。只有当您向其投掷绘图字符时,它才会出现问题。 Firefox的性能更好,但也不是完美的。 …(续)

–百富勤
19 Mar 23 '19 at 6:10

(续)…同样,William Entriken的答案在Firefox中非常糟糕,而在IE中则非常糟糕。同时,Arjan的答案和Somnath Muluk的答案在Internet Explorer中效果很好(Arjan,SomnathMuluk)。

–百富勤
19 Mar 23 '19 at 6:10

与浏览器无关,在某些情况下,固定宽度(也称为等宽)字体没有所有字符,而可变宽度字体用作后备。这通常是由于所选字体中的后备配置不佳所致,可以通过选择或安装具有更好unicode覆盖率的其他固定宽度字体来解决。

–ocæon
19年5月7日在17:55



#18 楼

虽然不是数据位于单元格中的表,但为了在列中显示数据,我使用了HTML <pre>标签。 br /> SQL可以用于返回分布式样本集吗?

#19 楼


更新:有关表支持的正式声明在这里

以下是原始答案。

免责声明:这不是Stack Exchange的正式答复。
免责声明2:此功能正在SO Teams中进行Beta测试。

最后在2020年秋天出现。表格(Markdown)



表格(呈现),加上RTE



确切的时间表仍然存在未知,但希望它们会在不久的将来推出(它们现在已经完全可用)。

评论


所以这个来源是...?

–蠕虫
20/09/24在15:30

从技术上讲,自从很久以来它们就已包含在Stack Overflow的文档中以来,它们一直在起作用。在整个网络上发布功能是一项更大的任务,而不是在创建时将其放入全新功能中。

– animuson♦
20 Sep 24 '15:31



@Wrigglenite Catija在此信息发布后立即将该请求标记为状态计划的,因此它似乎即将推出。

–科多斯·约翰逊(Kodos Johnson)
20-09-25在1:19

关于此的官方公告:meta.stackexchange.com/questions/356997/…

–Toastrackenigma
20 Nov 25'3:36

#20 楼

我使用MathJax的数组为MathJax创建了一个表生成器:https://isaurssaurav.github.io/mathjax-table-generator/

用法:


添加所需的列和行。
您可以在表格出现时向单元格中添加值。
单击Generate按钮为表格生成MathJax代码。



存储库链接:https://github.com/isaurssaurav/mathjax-table-generator(欢迎进行任何更改)

评论


大多数SE网站上未启用MathJax,因此适用范围非常有限。

–内森·塔吉(Nathan Tuggy)
18/09/14在10:20

您可以通过添加简短的说明来实际改善其答案。

– Glorfindel
18-09-14在12:23

屏幕截图:MathJax应该是一个单词。

–P.Mort。 -忘记了粘土Shirky_q
20年1月13日,0:56

#21 楼

这是您可能考虑使用的另一种难看的方法。我在这里说明以显示数字矩阵。

┏━━━┳━━━┳━━━┳━━━┳━━━┳━━━┳━━━┳━━━┳━━━┓
┃ 1 ┃ 2 ┃ 5 ┃ 7 ┃ 8 ┃ 9 ┃ 6 ┃ 4 ┃ 3 ┃
┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫
┃ 8 ┃ 3 ┃ 7 ┃ 4 ┃ 6 ┃ 5 ┃ 1 ┃ 9 ┃ 2 ┃
┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫
┃ 6 ┃ 4 ┃ 9 ┃ 2 ┃ 1 ┃ 3 ┃ 8 ┃ 5 ┃ 7 ┃
┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫
┃ 2 ┃ 8 ┃ 3 ┃ 9 ┃ 5 ┃ 4 ┃ 7 ┃ 1 ┃ 6 ┃
┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫
┃ 5 ┃ 6 ┃ 1 ┃ 3 ┃ 7 ┃ 8 ┃ 4 ┃ 2 ┃ 9 ┃
┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫
┃ 9 ┃ 7 ┃ 4 ┃ 1 ┃ 2 ┃ 6 ┃ 5 ┃ 3 ┃ 8 ┃
┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫
┃ 3 ┃ 1 ┃ 2 ┃ 6 ┃ 4 ┃ 7 ┃ 9 ┃ 8 ┃ 5 ┃
┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫
┃ 7 ┃ 9 ┃ 8 ┃ 5 ┃ 3 ┃ 1 ┃ 2 ┃ 6 ┃ 4 ┃
┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫
┃ 4 ┃ 5 ┃ 6 ┃ 8 ┃ 9 ┃ 2 ┃ 3 ┃ 7 ┃ 4 ┃
┗━━━┻━━━┻━━━┻━━━┻━━━┻━━━┻━━━┻━━━┻━━━┛


评论


仅供参考,这至少在Mac上是无效的(因为Mac显然不以与固定宽度字母相同的固定宽度绘制Unicode固定宽度的箱形绘图字符),并且可能还有其他浏览器/ OS组合。不能在Mac上运行当然是Apple的错,但这是不幸的事实,即并非所有的计算机都可以正确显示。

–SevenSidedDie
17 Mar 12 '17 at 4:16

感谢您的解释。我现在不会使用它。也许这种方法将来会有用。也许将来,Stack Exchange将学习如何格式化以及GitHub。

–威廉迷住了
17 Mar 12 '17 at 4:51

@SevenSidedDie在Mac上对我来说看起来很好。如果有问题,那是因为方框中的绘图字符和数字是以不同的字体呈现的,但是您应该在Menlo中看到它,其中包含所有方框中的字符

–蔡
17 Mar 12 '17 at 7:48

#22 楼

我使用$ \ LaTeX $

$$\begin{array}{c|ccccccc|}
    \lambda & (5)& (4,1)& (3,2)& (3,1,1)& (2,2,1)& (2,1,1,1)&
   (1,1,1,1,1)\
\hline 
    d_{_\lambda} & 1& 4& 5& 6& 5& 4& 1\ 
\end{array}$$


制成了一个表格,如下所示。但无济于事。

最后在OR.Meta.SE上使用MathJax常见问题解答。

在启用MathJax的网站上,此结果提供了此结果: br />

#23 楼

如果您可以使用某些JavaScript,则可以使用console.table



 /*<ignore>*/console.config({maximize:true,timeStamps:false,autoScroll:false});/*</ignore>*/
const table = [
["Col1", "Col2"],
["Entry1", "Entry2"],
["Entry3","Entry4"]
];
console.table(table) 

 <!-- https://meta.stackoverflow.com/a/375985/ -->    <script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 




评论


命名属性将为您提供列标题:console.table([{{FirstName:“ Jane”,LastName:“ Doe”},{FirstName:“ John”,LastName:“ Smith”}])

–佳能
20 Dec 10'20:41



@canon很高兴认识控制台作者:)我想可以,但是需要更多的输入(并非所有用户都熟悉js循环)。在任何情况下,只要有新表支持,都没关系。

–TheMaster
20 Dec 10 '21:25

对,对。干杯。

–佳能
20 Dec 10 '21:54

#24 楼

粘贴https://senseful.github.io/text-table/的表结果。

显示如下:-)

+ ----- ------------------------------ + ------------ + ------ -+
| Col1 | Col2 | NumCol |
+ ----------------------------------- + ------- ----- + -------- +
|值1 |值2 | 123 |
|这是只有一个单元格的行| | |
|此行正在测试html实体|测试45 |
+ ----------------------------------- + ------- ----- + -------- +

现在选择Stack Overflow上的表并单击{}代码示例图标。

然后将其格式化像这样:

+-----------------------------------+------------+--------+
|               Col1                |    Col2    | NumCol |
+-----------------------------------+------------+--------+
| Value 1                           | Value 2    |    123 |
| This is a row with only one cell  |            |        |
| This row is testing html entities | Te<br />st |     45 |
+-----------------------------------+------------+--------+


#25 楼

我只是注意到,当我们回顾这些建议时,即使与DBA上的相应建议一样,也从未更新过。 /所有页面布局,无论是无意还是恶意,都是不可行的。
我知道。糟透了但这就是Ya的HTML表格。
另请参阅:Markdown脚注?


评论


那么,通过Markdown扩展支持表的其他所有人如何做到这一点呢?我不是HTML专家,但我不知道世界上允许简单的表格如何破坏整个页面的布局。甚至不像您允许使用自由格式的HTML。而且,我不必说,鉴于新的“堆栈片段”功能确实可以使人们编写代码,这听起来特别荒谬。如果团队中有可以实现此目标的程序员,则应该能够驯服
标签。

–科迪·格雷
2014年9月11日下午6:53



您是否看过代码片段的实现?渲染被困在按需生成的固定大小的iframe中;页面的默认渲染完全没有集成。换句话说,我们通过完全不尝试使该特定问题(以及许多其他问题)回避了。就是说...代码片段确实在这里提供了潜在的解决方案,我们正在寻找扩展方法。

– Shog9
2014年9月11日14:25在

关键是,如果您具有解决该问题的技能(和/或倾向),则应该能够解决相对简单的嵌套表问题。无论如何,在固定大小的iframe中呈现简单的,特定于markdown的表对我来说似乎还是完全过头了。

–科迪·格雷
2014年9月11日20:24在

好吧... @Cody,我们还没有解决-如果您还没有尝试在移动设备上尝试一些示例代码段,没有尝试使输出正确渲染,因此如果作者不小心,您很有可能最终只能在输出周围滚动一个很小的视口(或更糟)。没想到输出会匹配网络上每个站点的主题,实际上,大多数站点甚至都没有启用它们。同样,我们没有使用片段来解决该问题-我们完全回避了它。我们可以对表做同样的事情吗?当然-如果那是人们真正想要的。

– Shog9
2014年9月11日20:58在

那么,如何使它适用于Documentation?

– eggyal
16年7月27日在9:39

Docs使用CommonMark的实现@eggyal。

– Shog9
16年7月27日在14:39

已经有可能破坏页面布局。

–唐老鸭
17年7月18日在22:26

您会不会因此而改变主意?现在是2019年,并且一个编程站点不支持标准标记功能。这难道不让您感到尴尬吗?

– Endolith
19年11月19日在21:31

最近发表