Oh MyUtils

Markdown表格生成器 - 在线可视化创建和编辑表格

使用可视化网格编辑器创建和编辑Markdown表格。设置列对齐、导入CSV/Markdown,实时获取GFM输出 — 100%客户端处理,数据不发送到服务器。

格式
3列 × 4行
生成的Markdown
| | | | | :-- | :-- | :-- | | | | | | | | | | | | |

常见问题

什么是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);

相关工具