Markdown是我几乎所有内容都写的格式- READMEs,插件文档,发布笔记,拉请求描述,WP Adminify的更改日志,我内部笔记的一半,它让开了每个构造,除了一个表涉及的那一刻,我停止写并开始计算管道字符,流程就没有了,在五行表中添加一列,你正在手工编辑六行,加上分隔符行,直到页面渲染时你才会知道你是否正确。
TL;博士: 的 降价表生成器 give你一个电子表格式的网格,在你键入时生成有效的github风味markdown,导入csv,电子表格粘贴,或者现有的markdown表,这样你就可以对其进行重组,一键设置每列对齐,导出markdown,html,或者csv。一切都在你的浏览器中运行。
该工具的存在是因为表语法是 Markdown 中源格式主动对抗编辑的一部分。本指南涵盖了 GFM 表的工作原理、决定是否渲染的规则、破坏行的转义陷阱以及如何使用生成器来处理工作流程表通常来自 - 电子表格、查询结果或某人已经编写的表。
什么是 Markdown 表?
Markdown 表是按固定顺序堆叠的三个成分:标头行、分隔行和零个或多个主体行。表根本不是核心 Markdown 的一部分 - 它们是由定义的扩展 GitHub 风味降价规格的,这就是为什么一个表可以在github上渲染,并在其他地方作为字面管道出来。单元格由管道字符分隔,每行恰好占用一行。
| Tool | Category | Offline |
| --- | --- | --- |
| JSON Formatter | Coding | Yes |
| YAML to JSON | Data | Yes |
Delimiter 行是使它成为表格而不是包含管道的段落的部分,它必须是第二行,它必须由带有可选冒号的连字符组成,并且它必须具有与标头相同的单元格数,这些单元格中的任何一个都弄错了,渲染器将整个块视为普通文本 - 这就是为什么 "我的表渲染为纯文本 " 几乎总是分隔符行问题。
Tables 并不是原始 CommonMark 规范的一部分,它们作为 GitHub Flavored Markdown 扩展而到来,随后几乎随处被采用:GitHub、GitLab、Bitbucket、Obsidian、Notion、Docusaurus、MkDocs、VitePress、Hugo、Jekyll、Discord 和大多数静态站点生成器。 "Almost"是可操作的词。没有扩展的最小 CommonMark 渲染器会将您的表显示为字面管道,修复方法是发出 HTML - 生成器只需单击输出选项卡即可完成此操作。
为什么语法比看起来更难维护
Markdown表看书很容易,保一个是成本隐藏的地方,它来自四个地方。
结构以标点符号形式存在。 除了正则表达式、shell 命令和 TypeScript 联合类型中也出现的字符之外,没有单元格边界。单元格内的每一个都必须转义或行默默地获得列。
对齐是在结肠放置中编码的。 Long边冒号表示左对齐,两边冒号表示居中,右边冒号表示右对齐,没有Ke键词可以记住,和之间的区别 ---: 並 :--- 是连续一个角色,没有人仔细阅读。
编辑是多行的。 加一列,就是触摸每一行加上分隔符,重新排序行,就是剪切粘贴,没有视觉反馈,删除一列,就是每行搜索第n根管子。
源的对齐是手动的。 Padded列不是必需的 - 渲染器忽略额外的空间 - 但未添加的表读取差异是痛苦的,所以人们用手填充它们,然后每次细胞's内容增长时重新填充它们。
Grid编辑器把四个都去掉,你编辑单元格;语法生成,那就是工具的整个前提。
如何使用 Markdown 表生成器
1步:将您的数据放入网格中
三条路线,具体取决于数据已居住的位置。
输入它。 网格以填充的样本打开。覆盖单元格,或按空三乘三点击清除并开始新鲜。
从电子表格粘贴。 开导入面板,粘贴一个从Excel、Google表、数字或LibreOffice复制出来的范围,电子表格将标签页分隔的文本放在剪贴板上,导入器会自动检测到- 无需告诉它您正在使用哪个分隔符。
粘贴 CSV 或现有表格。 同一面板接受 CSV、分号分隔导出(许多欧洲局部区域中的默认值)、管道分隔文本和 Markdown 表。如果文本看起来像 Markdown 表 - 标题行后跟分隔符行 - 它被解析为一个,包括其列对齐方式,因此您可以从 README 加载表,对其进行重组,然后将其粘贴回来。
CSV导入遵循RFC 4180规则,而不是天真地在逗号上拆分,引用的字段可以包含逗号、换行符和代表字面引号字符的双引号。这比听起来更重要:任何在使用逗号的区域设置中包含地址、描述或价格的导出都会打破天真的拆分,直到一列短于一个单元格时您才会注意到。如果您的CSV足够大,您想在导入之前检查它, CSV 查看器 首先将其打开在可排序网格中。
2步:塑造桌子
网格周围的控制涵盖了原始 Markdown 中痛苦的操作:
- 行 並 列 添加到网格的末尾。
- 每行旁边的箭头将其向上或向下移动 - 对于根据您认为最重要的事项订购比较表很有用。
- 行或列标题上的减号按钮会立即删除它,同时遍历每一行。
- 转置 swaps 行和列。从报表粘贴的数据经常被错误地定位为文档, 转置是一键而不是完全重输入。
步骤 3:设置每列的对齐方式
每个列标题携带三个对齐按钮:左、中、右单击一个即可应用,再次单击返回渲染器's默认值,生成器将相应的冒号写入分隔行。
对齐值得刻意使用 数字列 - 价格、计数、百分比、持续时间 - 阅读效果要好得多 右对齐,因为数字按位置值排列 短状态值看起来整洁居中 文本属于左侧 这不是装饰;右对齐的数字列扫描最大值确实更快。
4步:选择输出格式并复制
三个输出选项卡:
降价 生产 GFM。这 填充列 toggle 控制单元格是否填充了空格,因此原始源在单空间编辑器中排列。填充不会改变表渲染方式 - 纯粹是为谁在 diff 中读取文件而设计的。 外管 控制每排的前管和后管;两种风格都是有效的,前管风格是迄今为止更常见的惯例。
HTML 产生a <table> 与 <thead> 並 <tbody> 和内联 text-align styles 匹配您的列对齐方式。将其用于缺乏表支持的渲染器、电子邮件模板或您需要时 colspan markdown无法表达的多行单元格,如果想走另一个方向,把一张桌子从网页中抬出来, html 到 Markdown 处理它。
CSV 将网格作为数据返回,并正确引用,用于粘贴到电子表格或馈送到脚本。
复制到剪贴板或下载为 .md、 .html、或者 .csv 文件。
实际上打破表格的逃避规则
两个字符几乎导致每个分解的 Markdown 表,并且两者都由生成器自动处理 - 但您应该知道手动编辑表的规则。
的管道。 单元格内的文字管道必须写为 \|。没有反斜杠,渲染器会看到一个列分离器,你的行会获得一个单元格,在它之后扔掉每一列。这在技术文档中最难咬,其中单元格合法地包含诸如此类的内容 string | null、 grep foo | wc -l的,或者是正则交替。转义甚至在反向勾选代码跨度内部也有效- 在极少数情况下,Markdown's通常的"代码跨度是字面"规则不适用。
的换行符。 GFM 表严格是一行一行,所以一个单元格不能包含真正的换行,通用解决方法是 HTML <br> tag。grid 中粘贴多行内容时,生成器会为您插入 tag;当您导入包含的表时 <br>it转换回编辑器中的真实换行,因此单元格可以轻松编辑。
2个规则又值得投入记忆,因为它们导致"我的表不渲染"与表本身无关的报告,首先,一个表在它后面跟一段话时需要在其前面空行,其次,在一个列表项内,整个表必须缩进到列表项's内容列-否则列表吞噬第一行,分隔行落在错误的地方。
表格来自哪里,以及每个案例如何流动
您已发送电子表格
复制范围,粘贴到导入面板中,将其加载到网格中,删除没有人需要的列,右对齐数字一,复制 Markdown。一分钟内即可获得一张需要十个手动格式化的表格。
查询结果或 API 响应
JSON 开始的数据通常需要一跳。将其转换为 json to csv器(csv),然后将csv粘贴到导入器中,反之- 你需要一个作为数据的Markdown表- 从输出选项卡导出CSV并运行它 CSV 转 JSON。
README 中已存在的表
Import面板中粘贴。它以完整的对齐方式回到网格中,因此添加列或重新排序行是正常的编辑而不是重写。这是我最常使用的工作流程:文档表一次增长一行数月,然后需要一次性全部重组。
您从头开始编写的比较表
Grid开始,按你想的键入,让padding自己排序。用grid而不是用pipe语法写一个比较,让你关注的是比较是否公平,而不是列是否排好。
必须在多个渲染器中工作的文档
GFM表支持的平台生成Markdown,然后将输出选项卡切换为HTML,对于不相同的网格,两个导出,没有重新键入如果您的管道无论如何将Markdown转换为HTML, 降价到 HTML 准确地向您展示转换产生的结果。
标记表与 HTML 表
| 考虑 | 标记表 | HTML 表 |
|---|---|---|
| 源的可读性 | 高 - 可扫描为纯文本 | 低标签主导内容 |
| 多线细胞 | 仅限经由 <br> |
本机,任何块内容 |
| 合并的细胞 | 不支持 | colspan 並 rowspan |
| 每列对齐 | 是的,通过分隔冒号 | 是的,通过 CSS 或属性 |
| 造型控制 | 没有 | 完整的CSS |
| 渲染器支持 | GFM扩展,广泛但不普遍 | 允许 HTML 的任何地方都通用 |
| 差异友好 | 好,每行一行 | 差,每行多行 |
实用规则:使用 Markdown,直到需要合并单元格、单元格内部的块元素或特定的样式。然后将该表切换为 HTML,并留下文档的其余部分。大多数 Markdown 渲染器都会将原始 HTML 通过,因此将两者混合在一个文件中是正常的。
关于隐私的说明
人们构建的表格通常是他们不愿意上传的表格:尚未公布的定价、员工人数、内部基准、客户'从电子表格粘贴的数据。
生成器是客户端 JavaScript,网格、导入解析器和页面中的每个导出运行,你粘贴的任何内容都不会离开你的机器,加载一次它就会离线继续工作。这与 toolz。dev 上所有内容背后的原理相同,推理值得在指南中完整阅读 在线工具中的数据隐私。如果你正在为日常工作整合一套更广泛的基于浏览器的实用程序, 编码工具指南 和 web开发人员工具包 涵盖其他获得书签的内容。
实用提示
保持头部短。 Padding on,一列中最宽的单元格设置源中每一行的宽度,一个冗长的标头使原始文件噪声大,没有任何渲染的好处。
不要担心生成的文件的未添加输出。 如果表是由脚本编写的并且从不读取为源,请关闭填充并保存字节。
粘贴前进行排序。 1次1个箭头点击重新排序行,五行就好,五十行就乏味了,先在电子表格中排序,然后导入。
注意空标题行。 With "第一行是header"关闭,生成器在你的数据上方发出一个空的header,因为GFM没有办法表达一个无头表,有些渲染器显示作为一个薄的空行,如果它困扰你,则导出HTML代替,它根本不需要header。
检查渲染的结果,而不是源。 Padded source看起来完美,如果分隔符行有错误的单元格数量,仍然会呈现错误。在您调用它完成之前,将您发布的任何平台粘贴到预览中。
常问问题
如何在 Markdown 中创建表格？
Markdown表需要一个头行,一个分隔符行连字符,每个记录一行,单元格由管道字符分隔。在生成器中填写网格,工具为您编写该语法,包括分隔符行和任何对齐冒号。
如何对齐降价表中的列？
Alignation 设置为分隔行中的冒号:左边一个冒号左对齐,两边中心冒号,右边一个冒号右对齐,在编辑器中从列头中选择对齐,自动生成正确的冒号放置。
我可以将 Excel 或 Google 表格范围转换为降价表格吗？
是的。 复制电子表格中的单元格并将它们粘贴到导入面板中。 电子表格将制表符分隔的文本放在剪贴板上，导入器会自动检测到该文本并加载到网格中。
如何在表格单元格中放置管道字符？
字面上的管道必须用反斜杠转义,否则渲染器会将其读取为列分离器。在编辑器中正常键入管道,生成器会在输出中为您转义。
一个降价表单元格可以包含多行吗？
Not with real newlines,因为 GFM 表严格来说是一行一行,通常的解决方法是单元格内部的 HTML 换行标签,当您粘贴的单元格包含换行时,此工具会自动插入该标签。
为什么我的表在 GitHub 上呈现为纯文本？
Delimiter行几乎总是原因:必须是第二行,并且必须具有与头相同的单元格数量,表前缺少的一条空行,当表遵循段落或位于列表内部时,也可以停止其渲染。
我必须填充列以使源排成一行吗？
No。Renderers忽略了额外的空格,因此一个未添加的表显示相同。Padding的存在是为了人类在编辑器或diff中读取原始文件。如果您喜欢紧凑的源,请用已添加的输出切换将其关闭。
是否到处都支持降价表？
Tables 是 GitHub 调味 Markdown 扩展,而不是原始 CommonMark 规范的一部分。 GitHub、GitLab、Obsidian、Notion、Docusaurus 和大多数静态站点生成器都支持它们,但一些最小的渲染器不支持它们。如果您的输出是其中之一,则将输出切换到 HTML。
