メインコンテンツへスキップ

無料マークダウンテーブルジェネレーター

列ごとに配置して Markdown テーブルを視覚的に編集します。 CSV または TSV からインポートし、GitHub 風味の Markdown 出力をコピーします。

読み込み後はオフラインでも動作
CSV、TSV、またはMarkdownからインポート
プレビュー
名前メール役割
Alicealice@example.com管理者
Bobbob@example.com編集者
Carolcarol@example.com閲覧者
| 名前    | メール               | 役割  |
| :---- | :---------------- | :-: |
| Alice | alice@example.com | 管理者 |
| Bob   | bob@example.com   | 編集者 |
| Carol | carol@example.com | 閲覧者 |

主な用途

  • GitHub READMEファイル用のテーブルを構築するGitHubはMarkdownテーブルをネイティブにレンダリングします。機能比較テーブル、API参考資料、またはロードマップを視覚的に構築します。
  • APIおよびリファレンスドキュメントテーブルAPIドキュメント用のパラメータテーブル、ステータスコード参考資料、フィールド定義テーブルを構築します。
  • Obsidian / Notion / Logseqでテーブルを構築するMarkdownベースのノートアプリはすべてテーブルをサポートしています。プレーンテキストより速くここで構築します。
  • ブログ投稿にテーブルを追加する価格比較、機能マトリックス、チュートリアルリファレンステーブル—Markdownはそれらを追加する最も低摩擦の方法です。
  • CSVをMarkdownテーブルに変換するスプレッドシートからCSVを貼り付けて、ドキュメントまたはノートに貼り付ける準備ができたMarkdownテーブルを取得します。

使い方

このツールは、手書きのJavaScriptで構築された完全にクライアントサイドのMarkdownテーブルエディタです — サードパーティのテーブルライブラリは一切関与しません。GitHub Flavored Markdownのパイプテーブル構文をブラウザ内で直接生成し、列幅のライブパディングと列ごとの配置マーカーを備え、同じデータをHTML、CSV、JIRA wiki記法、reStructuredTextグリッドテーブルとしてもエクスポートできます。

  1. 1
    ビジュアルグリッドでセルを編集する
    すべてのヘッダーとセルは編集可能な入力欄です。入力するとReactの状態更新がuseMemo呼び出しをトリガーし、ジェネレーターを即座に再実行するため、出力パネルはデバウンス遅延なしにキーストロークごとに更新されます。
  2. 2
    ジェネレーターがGFM構文をパディング・エスケープする
    手書きのgenerateMarkdown関数は各列の最大コンテンツ幅を測定し、配置のために各セルをスペースでパディングし、:--- / ---: / :---: マーカー付きの区切り行を生成し、リテラルのパイプ文字を\|、改行をbr要素としてエスケープします。これによりテーブルはどのMarkdownレンダラー内でも有効なままです。
  3. 3
    CSV、TSV、既存のMarkdownテーブルをインポートする
    インポートボックスに貼り付けると、手書きのRFC 4180準拠CSV/TSVパーサー(lib/csv.ts)、またはエスケープされていないパイプで行を分割し区切り行から配置を読み取るカスタムのMarkdownテーブルパーサーのいずれかが起動し、既存のテーブルをエディタに再度読み込むことができます。
  4. 4
    必要な形式でコピーする
    出力形式のタブを切り替えると、対応するジェネレーター(スタイル属性付きHTML、RFC 4180 CSV、||ヘッダー付きJIRA wiki記法、+---+境界線付きreStructuredTextグリッドテーブル)が再実行され、コピーボタンは標準のnavigator.clipboard APIを介して結果をクリップボードに書き込みます。

関連ツール

よくある質問