CSV → HTML 표 변환기
CSV 파일을 <table><tr><td> 마크업을 사용하는 HTML 스니펫으로 변환합니다. 구분자, 첫 줄을 헤더로 사용할지 여부, <thead>/<tbody>로 감쌀지 여부를 선택할 수 있습니다. 변환 결과는 실시간으로 미리보기가 가능하며 복사하거나 다운로드할 수 있습니다. 변환은 모두 브라우저 내에서 처리되며 서버로 전송되지 않습니다.
| 구분자 |
|
|---|---|
| 첫 줄을 헤더로 사용 | |
| thead/tbody로 감싸기 |
미리보기
HTML 코드
복사했습니다!CSV 데이터를 입력하면 여기에 생성된 HTML 표가 표시됩니다.
CSV 행과 HTML 표의 대응 관계
| CSV 한 행 | name,age,city |
|---|---|
| 변환된 HTML 마크업 | <tr><td>name</td><td>age</td><td>city</td></tr> |
첫 줄을 헤더로 사용하면 <th> 태그로 이루어진 행으로 변환되고, 그 이후의 각 행은 <td> 태그로 이루어진 행으로 변환됩니다.
CSV→HTML 표 변환이란
HTML로 표를 쓰려면 행마다 <tr>, 셀마다 <td>를 늘어놓아야 하여 손으로 하기에는 품이 듭니다. 이 도구는 CSV를 읽어 <table> 형식의 HTML 조각으로 변환합니다. 결과를 그 자리에서 미리 볼 수 있으므로, 붙일 곳에서의 모습을 복사하기 전에 확인할 수 있습니다.
셀 안의 <·>·&는 자동으로 HTML 엔티티로 바뀌므로, 기호가 들어 있는 데이터라도 표시가 흐트러지지 않습니다. thead·tbody로 감쌀지 여부도 고를 수 있습니다. 의미상으로는 붙이는 편이 바람직하지만, HTML 메일처럼 해석이 불안정한 환경에서는 빼낸 최소 구성이 안정적입니다.
HTML 표 만드는 법
- CSV를 붙여 넣습니다 입력 칸에 CSV를 붙여 넣습니다. 스프레드시트에서 복사한 경우에는 구분 문자를 탭으로 바꿔 주십시오.
-
머리글 행의 처리를 정합니다
「첫 행을 머리글로 삼는다」를 켜면 첫 행이
<th>태그로 출력됩니다. - thead·tbody의 유무를 고릅니다 보통은 붙인 채로 괜찮습니다. HTML 메일 등 표시가 불안정한 환경에는 빼 주십시오.
- 미리 보기로 확인하고 복사합니다 실제로 렌더링된 표를 보고 문제가 없다면, HTML 코드를 복사해 붙여 넣습니다.
더 잘 활용하기 위한 팁
- HTML 이메일이나 Markdown을 지원하지 않는 오래된 CMS에 붙여넣을 때는 thead/tbody 없이 최소 구성으로 출력하면 다루기 쉬워집니다.
- 셀 안의
<,>,&는 자동으로 HTML 엔티티로 이스케이프되므로, 생성된 코드를 그대로 붙여넣어도 레이아웃이 깨지지 않습니다. - 미리보기는 변환 결과를 브라우저가 실제로 렌더링하는 모습 그대로 보여주므로, 코드를 복사하기 전에 표시 형태를 확인할 수 있습니다.
- 자매 도구인 CSV → Markdown 변환, CSV → JSON 변환과 함께 사용하면 하나의 CSV를 용도에 맞는 세 가지 형식으로 변환할 수 있습니다.
CSV→HTML 변환의 활용 상황
블로그나 CMS에 표를 싣기
마크다운에 대응하지 않는 CMS라도 HTML 편집 모드에 붙여 넣으면 표를 게재할 수 있습니다.
HTML 메일에 표를 넣기
메일은 마크다운을 해석하지 않으므로 표를 넣으려면 HTML이 필요합니다. thead·tbody를 뺀 최소 구성이 안정적입니다.
구현 전의 목업을 만들기
화면 설계 단계에서 실제 데이터에 가까운 표를 바로 HTML로 만들 수 있습니다. 스타일 적용의 확인에도 쓸 수 있습니다.
기호가 들어 있는 데이터를 안전하게 싣기
부등호나 앰퍼샌드가 들어 있는 값도 자동으로 이스케이프되므로, 붙일 곳에서 레이아웃이 깨지지 않습니다.
HTML 표의 용어
- table 요소
- 표를 나타내는 HTML 태그입니다. 행과 열을 가진 실제 데이터의 표현이라는 본래의 용도에서는 지금도 최적의 태그입니다.
- th와 td
<th>는 머리글 셀,<td>는 데이터 셀입니다. 구별함으로써 화면 낭독기가 대응 관계를 전할 수 있습니다.- thead·tbody
- 머리글 부분과 본문 부분을 의미상으로 나누는 태그입니다. 긴 표를 인쇄할 때 머리글을 되풀이하는 거동에도 관계합니다.
- HTML 엔티티
- 기호를 안전하게 표시하기 위한 표기법입니다.
<는<처럼 바뀝니다. - 테이블 레이아웃
- 표 짜기로 페이지 전체의 단 구성을 만드는 옛 수법입니다. 현재는 명확한 안티패턴으로 여겨집니다.
자주 묻는 질문
<table> 마크업이므로 WordPress의 HTML 편집 모드나 HTML 이메일 본문에 바로 붙여넣어 사용할 수 있습니다.
여담 ― <table> 태그가 지금까지도 사라지지 않는 이유
1990년대 후반 웹 초창기에는 <table> 태그로 페이지 전체 레이아웃을 짜는 "테이블 레이아웃"이 주류였습니다. 당시 CSS는 레이아웃 표현력이 부족해 여러 단(段)으로 나누는 사실상 유일한 실용적 수단이 표였기 때문에, 그 시절 HTML 소스에는 표 형식 데이터와는 무관한 <table> 요소가 가득했습니다.
CSS가 성숙하고 Flexbox와 Grid가 널리 보급된 지금은 레이아웃 목적의 표 사용이 잘 알려진 안티패턴으로 여겨집니다. 하지만 본래 용도인 "행과 열로 구성된 실제 데이터"를 표현하는 상황에서는 <table>이 여전히 가장 적합하고 접근성이 뛰어난 태그로 남아 있습니다. 스크린 리더가 <th>와 <td> 사이의 관계를 읽어줄 수 있기 때문입니다.
블로그 글이나 이메일 뉴스레터에 CSV 내용을 붙여넣고 싶은 수요는 지금도 여전합니다. HTML 이메일은 Markdown을 렌더링할 수 없고, 일부 CMS에는 Markdown 플러그인이 없기 때문입니다. 스프레드시트 결과를 클릭 한 번으로 HTML 표로 변환하는 도구는 이런 소박하지만 꾸준한 실무 수요를 뒷받침합니다.