Markdownは私がほとんどすべてを書く形式です - README、プラグインドキュメント、リリースノート、プルリクエストの説明、WP Adminifyの変更履歴、私の内部メモの半分 テーブルが関係している瞬間、私は書くのをやめてパイプ文字を数え始め、フローがなくなった5 行のテーブルに列を追加し、6 行を手作業で編集している、さらに区切り文字の行、そしてページがレンダリングされるまで正しく理解したかどうかわからない。
tl;dr: ザ・ マークダウン テーブル ジェネレーター スプレッドシート形式のグリッドを提供し、入力時に有効なgithub Flavored Markdownを生成し、CSV、スプレッドシート貼り付け、または既存のMarkdownテーブルをインポートして再構築できるようにします ワンクリックで列ごとの配置を設定し、Markdown、HTML、またはCSVをエクスポート すべてブラウザで実行されます。
このツールが存在するのは、テーブル構文が Markdown の中でソース形式が編集と積極的に戦う部分であるためです。このガイドでは、GFM テーブルの仕組み、レンダリングするかどうかを決定するルール、行を中断するエスケープ トラップ、ワークフロー テーブルのジェネレーターの使用方法 (通常はスプレッドシート、クエリ結果、または誰かがすでに書いたテーブル) について説明します。
Markdownテーブルとは何ですか?
Markdown テーブルは、ヘッダー行、区切り文字行、0 個以上のボディ行という固定された順序で積み重ねられた3 つの成分です。 tables are not part of core Markdown at all - they are a extension defined by the GitHub フレーバーマークダウン仕様、テーブルがgithub上でレンダリングでき、他の場所でリテラルパイプとして出てくるのはこのためです。 セルはパイプ文字で区切られており、各行は正確に1 行を占めます。
| Tool | Category | Offline |
| --- | --- | --- |
| JSON Formatter | Coding | Yes |
| YAML to JSON | Data | Yes |
区切り文字の行は、パイプを含む段落ではなく、テーブルにする部分です。 2行目である必要があり、オプションのコロンを含むハイフンで構成され、ヘッダーと同じ数のセルを持つ必要があります。 どれかを間違えると、レンダラーはブロック全体を通常のテキストとして扱います。 " my table renders as plain text" は、ほとんどの場合、区切り文字の行の問題です。
テーブルは元の CommonMark 仕様の一部ではありません。 GitHub フレーバー付き Markdown 拡張機能として到着し、その後、GitHub、GitLab、Bitbucket、Obsidian、Notion、Docusaurus、MkDocs、VitePress、Hugo、Jekyll、Discord、およびほとんどの静的サイト ジェネレーターのほぼどこでも採用されました。 "Almost" は有効な単語です。拡張機能のない最小限の CommonMark レンダラーはテーブルをリテラル パイプとして表示し、代わりに HTML を送信するという修正です。ジェネレーターは出力タブをワンクリックで実行できます。
構文が見た目よりも維持が難しい理由
Markdownテーブルを読むのは簡単です 1 つを維持することはコストが隠れる場所であり、それは4 つの場所から来る。
構造は句読点に住んでいます. 正規表現、シェルコマンド、TypeScript ユニオンタイプにも表示される文字を除いて、セルの境界はありません。セル内のすべての文字をエスケープするか、行が静かに列を取得する必要があります。
アライメントはコロン配置でエンコードされます。 左のコロンは左揃え、両サイドのコロンは中央揃え、右のコロンは右揃えを意味し、覚えておくキーワードもなく、その違い ---: あんど :--- 誰もよく読まない一文字が並んでいる。
編集は複数行です. 列を追加すると、すべての行に区切り文字を加えたものにタッチすることになります。行を並べ替えるということは、視覚的なフィードバックなしでカットアンドペーストすることを意味します。列を削除すると、すべての行で n 番目のパイプを検索することになります。
ソースの位置合わせは手動です。 パッド入りの列は必要ありません - レンダラーは余分なスペースを無視します - しかし、パッドのないテーブルは差分で読み取るのが惨めなので、人々は手でパッドを入れ、セル' のコンテンツが成長するたびにパッドを再度入れます。
グリッドエディターは4 つすべてを削除します。 you edit cells; the syntax is generated.それがツールの前提全体です。
Markdown Table Generatorの使い方
ステップ1: データをグリッドに取り込みます
データがすでに存在する場所に応じて、3 つのルートがあります。
タイプして. グリッドは塗りつぶされたサンプルで開きます。セルを上書きするか、空の 3 つずつクリアを押して新しい状態を開始します。
スプレッドシートから貼り付けます. インポートパネルを開き、Excel、Google Sheets、Numbers、または LibreOffice からコピーされた範囲を貼り付けます。スプレッドシートにはタブ区切りのテキストがクリップボード上に配置され、インポーターはそれを自動的に検出します。使用している区切り文字を指示する必要はありません。
CSV または既存のテーブルを貼り付けます。 同じパネルで、CSV、セミコロン区切りのエクスポート (多くのヨーロッパのロケールではデフォルト)、パイプ区切りのテキスト、および Markdown テーブルを受け入れます。テキストが Markdown テーブル (ヘッダー行とそれに続く区切り文字行) のように見える場合は、列の配置を含めて 1 つとして解析されるため、README からテーブルをロードして再構築し、貼り付けることができます。
CSVインポートはカンマ上を素朴に分割するのではなく、RFC 4180 のルールに従います。 quotedフィールドには、リテラル引用文字を表すカンマ、改行、および二重引用符を含めることができます。 soundよりも重要です: カンマを使用するロケールにアドレス、説明、または価格を含むエクスポートは、素朴な分割を破り、列が1 セル短くなるまで気付かないでしょう。 CSVがインポート前に検査したいほど十分に大きい場合、 CSVビューア 最初に並べ替え可能なグリッドで開きます。
ステップ2:テーブルの形を整える
グリッド周りのコントロールは、生のMarkdownで痛みを伴う操作をカバーしています:
- ロウ あんど コラム グリッドの最後に追加します.
- 各行の横の矢印は、行を上下に動かします。最も重要なことを決定した内容で比較テーブルを注文するのに役立ちます。
- 行または列ヘッダーのマイナス ボタンは、すべての行を一度に削除します。
- 転置 行と列を交換する レポートから貼り付けられたデータは、ドキュメントに対して間違った方向を向いていることが多く、転置は完全な再入力ではなくワンクリックで行われます。
ステップ3:列ごとの位置合わせを設定します
各列ヘッダーには、左、中央、右の 3 つの位置合わせボタンがあります。1 つをクリックして適用し、もう一度クリックしてレンダラー' のデフォルトに戻ります。ジェネレーターは、対応するコロンを区切り文字の行に書き込みます。
整列は意図的に使う価値があります 数字の列 - 価格、カウント、パーセンテージ、期間 - 桁が場所の値で並んでいるので、右揃えの方がはるかに良く読めます 短いステータスの値は中心がきちんと見えます テキストは左に属します これは装飾ではありません; 右揃えの数字の列は、最大の値をスキャンするのに本当に速いです。
ステップ4: 出力形式を選択してコピーします
3 つの出力タブ:
マークダウン GFMを制作している。ザ パッド入りコラム toggle は、未加工のソースがモノスペース エディターに並ぶようにセルにスペースが埋め込まれているかどうかを制御します。パディングでは、テーブルのレンダリング方法については何も変更されません。これは純粋に、差分でファイルを読み取る人のためのものです。 外側のパイプ 各列の先頭パイプと後続パイプを制御します。どちらのスタイルも有効であり、先頭パイプ スタイルがはるかに一般的な規則です。
HTML を を生成します <table> と <thead> あんど <tbody> と インライン text-align 列の配置にマッチするスタイル テーブルサポートが不足しているレンダラーや、メールテンプレート、または必要なときに使います colspan そしてmarkdownが表現できない複数行のセル 逆方向に行ってWebページからテーブルを持ち上げたい場合、 html に値下げする 扱う.
CSV スプレッドシートに貼り付けたり、スクリプトにフィードしたりするために、適切に引用されたグリッドをデータとして返します。
クリップボードにコピーするか、としてダウンロードします .md、 .html、または .csv ファイル。
実際にテーブルを壊すエスケープ ルール
2 つの文字がほぼすべての壊れた Markdown テーブルを引き起こし、両方ともジェネレーターによって自動的に処理されますが、編集するテーブルのルールは手作業で知っておく必要があります。
パイプが. セル内のリテラルパイプは次のように記述する必要があります \|。 backslash がないと、レンダラーは列区切り文字を見て、あなたの行はセルを取得し、その後にすべての列を捨てます。 これは、セルに正当に含まれる技術文書で最も噛みつきにくい string | null、 grep foo | wc -l、または正則交替.エスケープはバックティックコードスパンの内側でも機能します - Markdown& #39; s usual " code spanがliteral" ルールが適用されないというまれなケースです。
の 改行. GFM テーブルは厳密に 1 行あたり 1 行であるため、セルに実際の改行を含めることはできません。ユニバーサル回避策は HTML です <br> タグ. multi-line content をグリッドに貼り付けると,ジェネレータは,あなたのためにタグを挿入します; を含むテーブルをインポートするとき <br>、それは編集者の実質の改行に戻ってセルが編集するのに快適であるように変換します。
2 つのより多くの規則は、メモリにコミットする価値があるので、彼らは" my table does not render" reports that have nothing to does with the table itself.まず、テーブルが段落に続くときに、その前に空白行が必要です。 2 番目に、リスト項目の内側に、テーブル全体をリスト項目& #39; s content columnにインデントする必要があります。 - そうしないと、リストは最初の行を飲み込み、区切り文字の行は間違った場所に上陸します。
テーブルの出所、および各ケースの流れ
送信されたスプレッドシート
範囲をコピーし、インポート パネルに貼り付け、グリッドにロードし、誰も必要としない列を削除し、数値の列を右揃えし、マークダウンをコピーします。手動でフォーマットするのに 10 分かかるテーブルの場合は 1 分以内です。
クエリ結果または API 応答
JSONとして始まるデータは通常1 ホップ必要です。 で変換します JSONからCSVへ、次にインポーターにCSVを貼り付けます。 逆方向に進みます - データとして必要なMarkdownテーブル - 出力タブからCSVをエクスポートし、実行します CSVからJSONへ。
README にすでに存在するテーブル
Importパネルに貼り付けます 配置がそのままの状態でグリッドに戻ってくるので 列の追加や行の並べ替えは 書き換えではなく 通常の編集になります これが私が最も使うワークフローです ドキュメントテーブルは1 行ずつ数ヶ月間増えていくので 一気にリストラが必要です。
ゼロから書いている比較表
グリッドから始めて、思ったとおりに入力し、パディング自体を整理します。パイプ構文ではなくグリッドに比較を書くことで、列が並んでいるかどうかではなく、比較が公平であるかどうかに注意が向けられます。
複数のレンダラーで動作する必要があるドキュメント
GFMテーブルをサポートするプラットフォームのMarkdownを生成し、そうでないものについては出力タブをHTMLに切り替えます 同じグリッド、2 つのエクスポート、再入力なし いずれにしてもパイプラインがMarkdownをHTMLに変換する場合、 HTML へのマークダウン 変換によって何が得られるかを正確に示します。
マークダウン テーブルと HTML テーブル
| 考慮 | Markdownテーブル | HTMLテーブル |
|---|---|---|
| ソースの可読性 | 高 - プレーンテキストとしてスキャン可能 | 低 - タグがコンテンツを支配します |
| 多系統細胞 | 経由のみ <br> |
ネイティブ、任意のブロックコンテンツ |
| マージされたセル | サポートされていません | colspan あんど rowspan |
| 列ごとの位置合わせ | はい、区切り文字コロンを介して | はい、CSS または属性経由で |
| スタイリング制御 | なし | フルcss |
| レンダラーサポート | GFM 拡張は広く普及していますが、普遍的ではありません | HTML が許可されている場合はどこでもユニバーサルです |
| 違和感のある親しみやすさ | いいぞ 1 行に1 行だ | 悪い、行ごとに多くの行 |
実用的なルール: マージしたセル、セル内のブロック要素、または特定のスタイルが必要になるまで Markdown を使用します。その後、その 1 つのテーブルを HTML に切り替えて、ドキュメントの残りの部分はそのままにします。ほとんどの Markdown レンダラーは生の HTML を通過するため、1 つのファイルに 2 つを混合するのは正常です。
プライバシーに関する注意
人々が構築するテーブルは、多くの場合、アップロードしたくないものです。価格はまだ発表されていません。人員数、内部ベンチマーク、クライアント、#39;s データはスプレッドシートから貼り付けられます。
ジェネレータはクライアントサイドのJavaScriptです グリッド、インポートパーサ、ページ内のすべてのエクスポート実行、そしてあなたが貼り付けるものはあなたのマシンから何も残しません 一度ロードしてオフラインで動作し続けることは、 Toolz.dev上のすべての背後にある同じ原理であり、推論は上のガイドで完全に読む価値があります オンライン ツールのデータ プライバシー。日常業務用のブラウザベースのユーティリティのより広範なセットをまとめている場合は、 コーディング ツール ガイド そして、 Web 開発者ツールキット 他にブックマークを獲得できるものをカバーします。
実用的なヒント
ヘッダーは短くしてください. パディングをオンにすると、列内の最も広いセルがソース内のすべての行の幅を設定します。 verbose ヘッダーを使用すると、raw ファイルがノイズになり、レンダリングのメリットがなくなります。
生成されたファイルのパッドなし出力を恐れないでください。 テーブルがスクリプトによって記述され、ソースとして読み取られない場合は、パディングをオフにしてバイトを保存します。
貼り付ける前に並べ替えます. 矢印クリックを1 回ずつ行を並べ替えるのは5 行なら問題なく、50 行なら面倒です 最初にスプレッドシートで並べ替え、次にインポートします。
空のヘッダー行に注意してください。 " 最初の行は header" がオフになっている場合、ジェネレータはデータの上に空のヘッダーを放射します。GFM にはヘッダーのないテーブルを表現する方法がないためです。一部のレンダラーでは、それを薄い空白の行として表示します。気になる場合は、代わりに HTML をエクスポートします。ヘッダーはまったく必要ありません。
ソースではなく、レンダリングされた結果を確認してください。 完璧に見えるパッド入りのソースは、区切り文字の行に間違った数のセルがある場合にも間違ったレンダリングを行うことができます。 done と呼ばれる前に、公開しているプラットフォームのプレビューに貼り付けます。
フェイク
Markdown でテーブルを作成するにはどうすればよいですか?
Markdownテーブルには、ヘッダ行、ハイフンの区切り文字行、およびレコードごとに1 行が必要で、セルはパイプ文字で区切られています。 generatorのグリッドに入力すると、ツールは区切り文字行と任意の配置コロンを含むその構文をあなたのために書き込みます。
マークダウン テーブルの列を整列するにはどうすればよいですか?
配置は区切り文字行のコロンで設定されます: 左側のコロンが左に、両側のコロンが中央に、右側のコロンが右に揃います。エディターの列ヘッダーから配置を選択し、正しいコロンの配置が自動的に生成されます。
Excel または Google スプレッドシートの範囲を Markdown テーブルに変換できますか?
はい。 スプレッドシートのセルをコピーして、インポート パネルに貼り付けます。 スプレッドシートは、インポーターが自動的に検出してグリッドにロードするタブ区切りのテキストをクリップボードに配置します。
パイプ文字をテーブル セルに入れるにはどうすればよいですか?
リテラルパイプはバックスラッシュでエスケープする必要があります。レンダラーが列区切り文字として読み取る必要があります。エディターでパイプを通常どおり入力すると、ジェネレーターが出力にエスケープします。
マークダウン テーブル セルに複数の行を含めることはできますか?
GFM テーブルは厳密に 1 行あたり 1 行であるため、実際の改行ではそうではありません。通常の回避策はセル内の HTML 改行タグです。貼り付けたセルに改行が含まれていると、このツールはこのタグを自動的に挿入します。
なぜテーブルが GitHub でプレーン テキストとして表示されるのですか?
区切り文字の行はほとんど常に原因です。2 行目でなければならず、ヘッダーと同じ数のセルが必要です。テーブルの前に空白行がない場合でも、テーブルが段落に続く場合やリスト内に位置する場合にレンダリングを停止できます。
ソースが揃うように列を埋める必要がありますか?
いいえ レンダラーは余分なスペースを無視するため、パッドされていないテーブルは同様に表示されます。エディターまたは差分で生のファイルを読み取る人間のためにパディングが存在します。コンパクトなソースを好む場合は、パッドされた出力のトグルでオフにします。
マークダウン テーブルはどこでもサポートされていますか?
テーブルは、元の CommonMark 仕様の一部ではなく、GitHub フレーバー付き Markdown 拡張機能です。 GitHub、GitLab、Obsidian、Notion、Docusaurus、およびほとんどの静的サイト ジェネレーターはそれらをサポートしていますが、一部の最小レンダラーはサポートしていません。あなたの出力がそれらのいずれかである場合は、出力を HTML に切り替えます。
