CSV to HTML 표 변환기

CSV를 HTML 테이블로 변환

예시 시도

CSV 입력

HTML 출력

로컬에서 실행 · 시크릿 붙여넣기 안전
HTML 테이블이 여기에 표시됩니다…
첫 번째 행이 헤더:

CSV to HTML 테이블 변환이란?

CSV to HTML 테이블 변환은 쉼표로 구분된 값을 브라우저가 시각적 표로 렌더링할 수 있는 구조화된 HTML 마크업으로 변환합니다. 출력은 HTML Living Standard에 정의된 표준 HTML 테이블 요소인 table, thead, tbody, tr, th, td를 사용합니다. 이 과정에서 각 CSV 행은 tr 요소에, 각 필드는 td 또는 th 셀에 매핑됩니다.

CSV 파일은 행이 줄바꿈으로 구분되고 필드가 구분자(일반적으로 쉼표)로 구분되는 일반 텍스트로 데이터를 저장합니다. CSV는 Excel, Google Sheets, 데이터베이스 같은 애플리케이션 간 데이터 저장 및 전송에는 적합하지만 표현 계층이 없습니다. HTML 테이블은 CSS로 스타일링하고, JavaScript로 정렬하고, scope 및 aria-label 같은 속성으로 접근성을 지원하는 시맨틱 마크업으로 데이터를 감싸 그 계층을 추가합니다.

변환 시 RFC 4180에서 정의한 여러 엣지 케이스를 처리해야 합니다. 쉼표나 줄바꿈을 포함하는 따옴표 필드, 필드 내 이스케이프된 큰따옴표, 다양한 구분자(세미콜론, 탭, 파이프)가 이에 해당합니다. 올바른 변환기는 셀 내용의 HTML 엔티티도 이스케이프하여 <, >, &, 따옴표 문자를 해당 엔티티 형식으로 치환함으로써 깨진 마크업이나 XSS 취약점을 방지합니다.

CSV to HTML 테이블 변환기를 사용하는 이유

HTML 테이블을 직접 작성하는 것은 특히 수십 개의 열이나 수백 개의 행을 가진 데이터셋에서는 지루하고 오류가 발생하기 쉽습니다. 이 변환기는 파싱, 이스케이프, 서식 지정을 한 번에 처리합니다.

즉시 테이블 생성
CSV를 붙여넣으면 적절한 thead와 tbody 구조를 갖춘 완전한 HTML 테이블을 즉시 얻습니다. 태그를 직접 작성하거나 행마다 셀 수를 세지 않아도 됩니다.
🔒
개인정보 보호 우선 처리
모든 변환은 JavaScript를 사용하여 브라우저에서 실행됩니다. CSV 데이터는 서버로 전송되지 않으며, 기록되거나 저장되지도 않습니다.
🎯
깔끔하고 유효한 출력
생성된 HTML은 올바른 중첩 구조인 table > thead/tbody > tr > th/td를 갖춘 HTML Living Standard를 따릅니다. 특수 문자는 렌더링 문제를 방지하기 위해 엔티티로 이스케이프됩니다.
📋
유연한 입력 형식
쉼표, 세미콜론, 탭, 파이프를 구분자로 자동 감지합니다. 이스케이프된 큰따옴표와 여러 줄에 걸친 필드를 포함하는 RFC 4180 인용 규칙을 처리합니다.

CSV to HTML 테이블 활용 사례

프론트엔드 개발
샘플 데이터로 HTML 테이블을 생성하여 UI 컴포넌트를 프로토타이핑합니다. 출력을 React, Vue, Angular 템플릿에 바로 복사하여 CSS 클래스를 적용하세요.
이메일 템플릿 제작
이메일 클라이언트(Outlook, Gmail)는 HTML 테이블을 안정적으로 렌더링하지만 대부분의 CSS 레이아웃 방식은 지원하지 않습니다. CSV 연락처 목록이나 보고서를 HTML 이메일에 삽입할 수 있는 테이블로 변환하세요.
정적 사이트 콘텐츠
스프레드시트 내보내기에서 가져온 데이터를 Jekyll, Hugo, Astro 페이지에 생성된 HTML 테이블로 바로 삽입합니다. 빌드 시 플러그인이 필요하지 않습니다.
QA 테스트 데이터 표시
CSV 테스트 매트릭스를 HTML 테이블로 변환하여 테스트 보고서나 Confluence 페이지에 포함합니다. 검토자가 스프레드시트 애플리케이션을 열지 않고도 결과를 살펴볼 수 있습니다.
데이터 저널리즘
CSV 데이터셋을 CMS 기사에 스타일링하여 삽입할 수 있는 HTML 테이블로 변환합니다. 변환 후 줄무늬, 정렬, 반응형 래핑을 위한 CSS를 추가하세요.
교육 및 문서화
튜토리얼, API 문서, 강의 자료를 위해 실제 CSV 데이터로 HTML 테이블 예제를 만듭니다. 학습자가 소스 형식과 렌더링된 출력을 함께 확인할 수 있습니다.

HTML 테이블 요소 참조

잘 구조화된 HTML 테이블은 헤더, 본문, 푸터를 분리하는 시맨틱 요소를 사용합니다. 화면 읽기 프로그램과 검색 엔진은 이러한 요소를 사용하여 테이블 구조를 이해합니다. thead, tbody, tfoot으로 행을 그룹화하면 브라우저가 독립적인 스크롤을 적용하고 인쇄 레이아웃에서 헤더 행을 반복할 수 있습니다.

요소역할비고
<table>Table rootWraps the entire table structure
<thead>Header groupContains header rows; browsers repeat on print page breaks
<tbody>Body groupContains data rows; enables independent scrolling with CSS
<tfoot>Footer groupSummary or totals row; renders after tbody
<tr>Table rowGroups cells horizontally
<th>Header cellBold and centered by default; supports scope attribute for accessibility
<td>Data cellStandard content cell; accepts any inline or block HTML
<caption>Table captionVisible title above the table; read by screen readers first
<colgroup>Column groupApplies width or style to entire columns without per-cell classes

CSV vs HTML 테이블

CSV는 단순성에 최적화된 전송 형식이고, HTML은 브라우저에서의 렌더링, 접근성, 인터랙티브성에 최적화된 표현 형식입니다.

CSV
일반 텍스트 형식. 데이터 타입 없음: 모든 값은 문자열입니다. 스타일링, 중첩, 메타데이터 없음. 행은 줄바꿈으로 구분되고 필드는 구분자로 구분됩니다. 파일 크기가 최소화됩니다. 스프레드시트, 데이터베이스, ETL 도구에서 범용 지원됩니다. RFC 4180으로 정의됩니다.
HTML Table
시맨틱 구조를 가진 마크업 형식. 헤더(th)와 데이터(td)를 구별합니다. 스타일링과 접근성을 위한 colspan, rowspan, scope, class 같은 속성을 지원합니다. 브라우저가 CSS 및 JavaScript 상호작용을 위해 DOM으로 파싱합니다. 서버 측 처리 없이 DataTables 같은 라이브러리로 정렬, 필터링, 페이지 나누기가 가능합니다.

코드 예제

다양한 언어로 CSV를 HTML 테이블로 프로그래밍 방식으로 변환하는 방법입니다. 각 예제는 헤더 행을 별도로 처리하고 셀 내용의 HTML 엔티티를 이스케이프합니다. 이 코드 조각들은 스크립트, 빌드 파이프라인, 데이터 내보내기에서 HTML 보고서를 생성하는 백엔드 API 엔드포인트에 바로 사용할 수 있습니다.

JavaScript (browser / Node.js)
// CSV string → HTML table with thead/tbody
const csv = `name,age,city
Alice,30,Berlin
Bob,25,Tokyo`

function csvToHtmlTable(csv) {
  const rows = csv.trim().split('\n').map(r => r.split(','))
  const [headers, ...data] = rows
  const ths = headers.map(h => `<th>${h}</th>`).join('')
  const trs = data.map(row =>
    '    <tr>' + row.map(c => `<td>${c}</td>`).join('') + '</tr>'
  ).join('\n')
  return `<table>
  <thead><tr>${ths}</tr></thead>
  <tbody>
${trs}
  </tbody>
</table>`
}

console.log(csvToHtmlTable(csv))
// → <table><thead><tr><th>name</th>...</tr></thead><tbody>...</tbody></table>
Python
import csv, io, html

csv_string = """name,age,city
Alice,30,Berlin
Bob,25,Tokyo"""

reader = csv.reader(io.StringIO(csv_string))
headers = next(reader)

lines = ['<table>', '  <thead>', '    <tr>']
for h in headers:
    lines.append(f'      <th>{html.escape(h)}</th>')
lines += ['    </tr>', '  </thead>', '  <tbody>']

for row in reader:
    lines.append('    <tr>')
    for cell in row:
        lines.append(f'      <td>{html.escape(cell)}</td>')
    lines.append('    </tr>')

lines += ['  </tbody>', '</table>']
print('\n'.join(lines))
# → well-formed HTML table with escaped special characters
PHP
<?php
$csv = "name,age,city\nAlice,30,Berlin\nBob,25,Tokyo";
$rows = array_map('str_getcsv', explode("\n", trim($csv)));
$headers = array_shift($rows);

echo "<table>\n  <thead>\n    <tr>\n";
foreach ($headers as $h) {
    echo "      <th>" . htmlspecialchars($h) . "</th>\n";
}
echo "    </tr>\n  </thead>\n  <tbody>\n";

foreach ($rows as $row) {
    echo "    <tr>\n";
    foreach ($row as $cell) {
        echo "      <td>" . htmlspecialchars($cell) . "</td>\n";
    }
    echo "    </tr>\n";
}
echo "  </tbody>\n</table>";
// → <table><thead>...<th>name</th>...</thead><tbody>...</tbody></table>
CLI (awk / csvtool)
# Using awk — quick one-liner for simple CSV (no quoted fields)
awk -F, 'NR==1{print "<table><thead><tr>";for(i=1;i<=NF;i++)print "<th>"$i"</th>";print "</tr></thead><tbody>"}
NR>1{print "<tr>";for(i=1;i<=NF;i++)print "<td>"$i"</td>";print "</tr>"}
END{print "</tbody></table>"}' data.csv

# Using Python one-liner for RFC 4180-compliant parsing
python3 -c "
import csv, sys, html
r=csv.reader(sys.stdin); h=next(r)
print('<table><thead><tr>')
print(''.join(f'<th>{html.escape(c)}</th>' for c in h))
print('</tr></thead><tbody>')
for row in r:
    print('<tr>'+''.join(f'<td>{html.escape(c)}</td>' for c in row)+'</tr>')
print('</tbody></table>')
" < data.csv

자주 묻는 질문

CSV를 HTML 테이블로 어떻게 변환하나요?
입력 패널에 CSV를 붙여넣으세요. 변환기가 각 행을 파싱하여 첫 번째 행을 thead 내부의 th 요소에 매핑하고, 나머지 행을 tbody 내부의 td 요소로 감쌉니다. 출력은 바로 복사하여 사용할 수 있는 완전한 HTML 테이블입니다.
생성된 HTML은 접근성을 지원하나요?
출력은 화면 읽기 프로그램에 테이블의 구조 정보를 제공하는 thead와 th 요소를 사용합니다. 완전한 WCAG 2.1 준수를 위해서는 헤더 셀에 scope 속성을 추가하고 테이블 내용을 설명하는 caption 요소를 추가해야 합니다.
CSV에서 < 나 & 같은 특수 문자는 어떻게 처리되나요?
변환기는 HTML에 민감한 모든 문자를 이스케이프합니다. <는 &lt;로, >는 &gt;로, &는 &amp;로, 큰따옴표는 &quot;로 변환됩니다. 이를 통해 깨진 마크업을 방지하고 테이블을 웹 페이지에 삽입할 때 XSS 공격을 막을 수 있습니다.
세미콜론으로 구분된 파일이나 탭으로 구분된 파일도 변환할 수 있나요?
네. 이 도구는 입력의 첫 번째 행을 분석하여 구분자를 자동 감지합니다. 쉼표, 세미콜론, 탭, 파이프를 지원하므로 파일을 쉼표로 구분된 형식으로 사전 변환할 필요가 없습니다.
CSV to HTML과 CSV to Markdown 테이블의 차이는 무엇인가요?
CSV to HTML은 시맨틱 요소(thead, tbody, th, td)를 사용하여 브라우저에서 렌더링 가능한 마크업을 생성하고 CSS 클래스로 스타일링을 지원합니다. CSV to Markdown은 GitHub README와 문서에서 사용되는 파이프로 구분된 일반 텍스트 표를 생성합니다. 스타일링 제어나 이메일 호환성이 필요할 때는 HTML을, 문서와 저장소에는 Markdown을 사용하세요.
따옴표로 묶인 필드가 있는 CSV 파일도 처리할 수 있나요?
네. 파서는 RFC 4180 규칙을 따릅니다. 큰따옴표로 묶인 필드는 쉼표, 줄바꿈, 그리고 연속된 두 큰따옴표로 이스케이프된 큰따옴표를 포함할 수 있습니다. 따옴표는 출력에서 제거되고 필드 내용은 HTML 셀 내부에 배치됩니다.
생성된 HTML 테이블에 CSS로 스타일을 적용할 수 있나요?
출력은 인라인 스타일이나 클래스가 없는 순수 HTML이므로 원하는 CSS를 자유롭게 적용할 수 있습니다. table 요소에 클래스를 추가한 다음 table th로 헤더, table td로 셀, table tr:nth-child(even)으로 줄무늬 스타일을 지정하세요. Bootstrap과 Tailwind 같은 프레임워크에는 내장 테이블 유틸리티 클래스가 있습니다.