마크다운 테이블 생성기 - 시각적으로 테이블 만들기 온라인
비주얼 그리드 에디터로 마크다운 테이블을 생성하고 편집하세요. 열 정렬 설정, CSV/마크다운 가져오기, 실시간 GFM 출력 — 100% 클라이언트 사이드, 서버 전송 없음.
자주 묻는 질문
마크다운 테이블 생성기란 무엇이고 왜 필요한가요?
마크다운 테이블 생성기는 파이프 문자(|), 대시(-), 정렬 콜론(:)을 직접 입력하지 않고도 마크다운 문법의 테이블을 만들 수 있는 시각적 도구입니다. 마크다운 테이블을 수동으로 작성하면 특히 열이 많거나 셀 내용이 긴 경우 오류가 발생하기 쉽습니다. 이 시각적 생성기는 스프레드시트 같은 그리드에서 셀 내용을 입력하고, 열 정렬을 설정하고, 완벽하게 포맷된 마크다운 출력을 즉시 받을 수 있습니다.
이 마크다운 테이블 생성기는 어떻게 사용하나요?
그리드 셀에 직접 내용을 입력하세요. 첫 번째 행은 항상 헤더 행입니다. 툴바 버튼을 사용하여 행과 열을 추가하거나 삭제할 수 있습니다. 열 정렬(왼쪽, 가운데, 오른쪽)을 설정하려면 각 열 헤더의 정렬 토글을 클릭하세요. 편집할 때마다 출력 패널에 마크다운이 실시간으로 생성됩니다. 복사 버튼을 클릭하면 클립보드에 마크다운이 복사됩니다.
데이터는 안전한가요? 브라우저 밖으로 데이터가 전송되나요?
데이터는 100% 안전하며 브라우저를 벗어나지 않습니다. 모든 테이블 편집과 마크다운 생성은 브라우저에서 직접 실행되는 JavaScript를 사용하여 클라이언트 측에서 수행됩니다. 셀 내용, 테이블 구조 또는 어떤 데이터도 서버로 전송되지 않습니다.
이 도구는 어떤 마크다운 테이블 문법을 생성하나요?
GitHub Flavored Markdown(GFM) 테이블 문법을 생성합니다. 파이프 문자(|)로 열을 구분하고, 헤더와 데이터 행 사이에 대시(-)로 구분자 행을 만들며, 구분자 행에 콜론(:)으로 열 정렬을 표시합니다. 왼쪽 정렬은 :---, 오른쪽 정렬은 ---:, 가운데 정렬은 :---:입니다. GitHub, GitLab, VS Code, Obsidian 등 모든 주요 마크다운 렌더러와 호환됩니다.
정렬 출력과 압축 출력의 차이점은 무엇인가요?
정렬 출력 모드는 셀 내용에 공백을 추가하여 파이프 문자가 수직으로 정렬되도록 합니다. 이렇게 하면 코드 에디터나 PR 리뷰에서 원시 마크다운을 읽기 쉬워집니다. 압축 모드는 추가 공백 없이 최소한의 유효한 문법을 출력하여 파일 크기가 중요할 때 유용합니다.
기존 마크다운 테이블을 가져와서 편집할 수 있나요?
네. 가져오기 버튼을 클릭하고 Markdown 모드를 선택하세요. 기존 마크다운 테이블을 가져오기 텍스트 영역에 붙여넣고 가져오기 버튼을 클릭하면 됩니다. 도구가 파이프로 구분된 문법을 파싱하고, 구분자 행에서 열 정렬을 감지하여 그리드 에디터에 셀 내용을 채웁니다.
CSV나 Excel 데이터를 마크다운 테이블로 변환할 수 있나요?
네. 가져오기 버튼을 클릭하고 CSV/TSV 모드를 선택하세요. 쉼표, 탭 또는 세미콜론으로 구분된 데이터를 붙여넣으면 됩니다. 도구가 자동으로 구분자를 감지하고 첫 번째 행을 헤더로 처리합니다. Excel 데이터의 경우 셀을 복사하여 바로 붙여넣으면 탭 구분 형식이 자동으로 감지됩니다.
테이블 크기 제한은 어떻게 되나요?
최대 20열, 100행(헤더 행 포함)까지 지원합니다. 마크다운 테이블이 20열을 넘으면 대부분의 렌더러에서 읽기 어려워지고, 매우 긴 테이블은 다른 데이터 형식이 더 적합하기 때문에 이러한 제한이 있습니다. 개별 셀은 최대 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);