Markdownテーブルジェネレーター - テーブルを視覚的に作成・編集 オンライン
ビジュアルグリッドエディターでMarkdownテーブルを作成・編集。列の配置設定、CSV/Markdownインポート、リアルタイムGFM出力 — 100%クライアントサイド処理。
よくある質問
Markdownテーブルジェネレーターとは何ですか？なぜ必要ですか？
Markdownテーブルジェネレーターは、パイプ文字（|）、ダッシュ（-）、コロン（:）を手動で入力することなく、Markdown構文でテーブルを作成できるビジュアルツールです。このビジュアルジェネレーターは、スプレッドシートのようなグリッドでセルの内容を入力し、列の配置を設定し、完璧にフォーマットされたMarkdown出力を即座に得ることができます。
このMarkdownテーブルジェネレーターの使い方は？
グリッドセルに直接内容を入力してください。最初の行は常にヘッダー行です。ツールバーボタンで行や列を追加・削除できます。列の配置を設定するには、各列ヘッダーの配置トグルをクリックしてください。生成されたMarkdownは編集中にリアルタイムで出力パネルに表示されます。
データは安全ですか？ブラウザ外にデータが送信されますか？
データは100%安全で、ブラウザの外に出ることはありません。すべてのテーブル編集とMarkdown生成は、ブラウザで直接実行されるJavaScriptを使用してクライアントサイドで行われます。セルの内容やテーブル構造などのデータはサーバーに送信されません。
このツールはどのMarkdownテーブル構文を生成しますか？
GitHub Flavored Markdown（GFM）テーブル構文を生成します。GitHub、GitLab、VS Code、Obsidianなど、すべての主要なMarkdownレンダラーと互換性があります。
整形出力とコンパクト出力の違いは？
整形出力モードはセルの内容にスペースを追加して、パイプ文字が縦に揃うようにします。これにより、コードエディターで生のMarkdownが読みやすくなります。コンパクトモードは余分なスペースなしで最小限の有効な構文を出力します。
既存のMarkdownテーブルをインポートして編集できますか？
はい。インポートボタンをクリックしてMarkdownモードを選択してください。既存のMarkdownテーブルを貼り付けてインポートをクリックすると、ツールが構文を解析してグリッドエディターにセルの内容を反映します。
CSVやExcelのデータをMarkdownテーブルに変換できますか？
はい。インポートボタンをクリックしてCSV/TSVモードを選択してください。カンマ、タブ、セミコロンで区切られたデータを貼り付けると、ツールが自動的に区切り文字を検出し、最初の行をヘッダーとして処理します。
テーブルのサイズ制限はありますか？
最大20列、100行（ヘッダー行を含む）のテーブルをサポートしています。個々のセルには最大500文字を入力できます。
コード例
function generateMarkdownTable(data, alignments = []) {
const numCols = Math.max(...data.map(row => row.length));
const rows = data.map(row => {
const normalized = [...row];
while (normalized.length < numCols) normalized.push('');
return normalized;
});
const colWidths = Array(numCols).fill(3);
for (let col = 0; col < numCols; col++) {
for (const row of rows) {
colWidths[col] = Math.max(colWidths[col], row[col].length);
}
}
const separator = Array.from({ length: numCols }, (_, i) => {
const align = alignments[i] || 'left';
const dashes = '-'.repeat(colWidths[i]);
if (align === 'center') return ':' + dashes.slice(1, -1) + ':';
if (align === 'right') return dashes.slice(0, -1) + ':';
return ':' + dashes.slice(1);
});
const formatRow = (cells) =>
'| ' + cells.map((c, i) => c.padEnd(colWidths[i])).join(' | ') + ' |';
return [
formatRow(rows[0]),
'| ' + separator.join(' | ') + ' |',
...rows.slice(1).map(formatRow)
].join('\n');
}
const table = generateMarkdownTable(
[['Name', 'Role'], ['Alice', 'Engineer'], ['Bob', 'Designer']],
['left', 'center']
);
console.log(table);