CSV → HTML 표 변환기

CSV 파일을 `

`/``로 감쌀지 여부를 선택할 수 있습니다. 변환 결과는 실시간으로 미리보기가 가능하며 복사하거나 다운로드할 수 있습니다. 변환은 모두 브라우저 내에서 처리되며 서버로 전송되지 않습니다.


` 마크업을 사용하는 HTML 스니펫으로 변환합니다. 구분자, 첫 줄을 헤더로 사용할지 여부, `
구분자
첫 줄을 헤더로 사용
thead/tbody로 감싸기

미리보기

HTML 코드


            
            복사했습니다!
            
          

CSV 데이터를 입력하면 여기에 생성된 HTML 표가 표시됩니다.

CSV 행과 HTML 표의 대응 관계

CSV 한 행 name,age,city
변환된 HTML 마크업 <tr><td>name</td><td>age</td><td>city</td></tr>

첫 줄을 헤더로 사용하면 `` 태그로 이루어진 행으로 변환되고, 그 이후의 각 행은 `` 태그로 이루어진 행으로 변환됩니다.

  • HTML 이메일이나 Markdown을 지원하지 않는 오래된 CMS에 붙여넣을 때는 thead/tbody 없이 최소 구성으로 출력하면 다루기 쉬워집니다.
  • 셀 안의 `<`, `>`, `&`는 자동으로 HTML 엔티티로 이스케이프되므로, 생성된 코드를 그대로 붙여넣어도 레이아웃이 깨지지 않습니다.
  • 미리보기는 변환 결과를 브라우저가 실제로 렌더링하는 모습 그대로 보여주므로, 코드를 복사하기 전에 표시 형태를 확인할 수 있습니다.
  • 자매 도구인 CSV → Markdown 변환, CSV → JSON 변환과 함께 사용하면 하나의 CSV를 용도에 맞는 세 가지 형식으로 변환할 수 있습니다.

자주 묻는 질문

가능하다면 붙이는 것이 권장됩니다. 헤더 행과 본문 행을 의미적으로 구분할 수 있기 때문입니다. 다만 일부 이메일 클라이언트처럼 thead/tbody 처리가 불안정한 환경에서는 이 태그들을 뺀 최소 마크업이 더 안정적으로 표시되는 경우가 있습니다.

네. 따옴표로 감싼 셀 안의 쉼표와 줄바꿈도 올바르게 해석되므로, Excel에서 복사한 복잡한 CSV 데이터도 표 구조가 깨지지 않고 HTML로 변환됩니다.

네. 생성되는 것은 표준 `` 마크업이므로 WordPress의 HTML 편집 모드나 HTML 이메일 본문에 바로 붙여넣어 사용할 수 있습니다.

아니요. 모든 변환 작업은 브라우저 내의 JavaScript에서 처리되며, 입력한 CSV 내용이 서버로 전송되는 일은 없습니다.
ツールくん

여담 ― `

` 태그가 지금까지도 사라지지 않는 이유

1990년대 후반 웹 초창기에는 `

` 태그로 페이지 전체 레이아웃을 짜는 "테이블 레이아웃"이 주류였다. 당시 CSS는 레이아웃 표현력이 부족해 여러 단(段)으로 나누는 사실상 유일한 실용적 수단이 표였기 때문에, 그 시절 HTML 소스에는 표 형식 데이터와는 무관한 `
` 요소가 가득했다.

CSS가 성숙하고 Flexbox와 Grid가 널리 보급된 지금은 레이아웃 목적의 표 사용이 잘 알려진 안티패턴으로 여겨진다. 하지만 본래 용도인 "행과 열로 구성된 실제 데이터"를 표현하는 상황에서는 `

`이 여전히 가장 적합하고 접근성이 뛰어난 태그로 남아 있다. 스크린 리더가 `
`와 `` 사이의 관계를 읽어줄 수 있기 때문이다.

블로그 글이나 이메일 뉴스레터에 CSV 내용을 붙여넣고 싶은 수요는 지금도 여전하다. HTML 이메일은 Markdown을 렌더링할 수 없고, 일부 CMS에는 Markdown 플러그인이 없기 때문이다. 스프레드시트 결과를 클릭 한 번으로 HTML 표로 변환하는 도구는 이런 소박하지만 꾸준한 실무 수요를 뒷받침한다.