HTML 표 → CSV 변환기
HTML <table> 태그가 포함된 소스를 붙여넣으면 CSV/TSV로 변환합니다. 다른 사이트의 표를 복사해 스프레드시트에 가져오고 싶을 때 편리합니다. thead 안의 헤더 행을 자동으로 인식하며, 변환 처리는 모두 브라우저 내에서 이루어지고 서버로 전송되지 않습니다.
HTML 표와 CSV 행의 대응 관계
| HTML 한 행 | <tr><td>name</td><td>age</td><td>city</td></tr> |
|---|---|
| 변환된 CSV 표기 | name,age,city |
<thead> 안의 행, 또는 첫 행이 <th>로만 구성된 경우 헤더 행으로 인식되며, 그 외의 각 <tr>은 CSV의 한 행으로 변환됩니다.
HTML 표 → CSV 변환기란
HTML 표 → CSV 변환기는 웹페이지에 삽입된 <table> 태그의 소스 코드를 붙여넣기만 하면 CSV 또는 TSV 데이터로 변환해 주는 도구입니다. 브라우저에서 다른 사이트의 표를 범위 선택해 복사하면 클립보드에 눈에 보이는 문자열뿐 아니라 HTML 구조까지 함께 담기는 경우가 많은데, 이를 그대로 이 도구에 붙여넣어 사용할 수 있습니다. <thead> 안의 행, 또는 첫 행의 셀이 모두 <th>로 구성된 경우는 자동으로 헤더 행으로 인식되므로, 헤더 유무를 수동으로 지정할 필요가 없습니다.
셀 안에 <strong>, <br>, <a> 같은 장식용 태그가 포함되어 있어도, 변환 시 태그만 제거되고 텍스트 내용은 그대로 남습니다. 구분자는 쉼표와 탭 중에서 선택할 수 있고, 헤더 행을 출력에 포함할지 여부도 자유롭게 전환할 수 있습니다. 붙여넣은 HTML에 여러 개의 <table> 태그가 포함되어 있는 경우, 가장 먼저 발견된 표만 변환 대상이 되고 나머지는 무시됩니다. 변환 과정은 모두 브라우저 안의 JavaScript에서 이루어지며, 붙여넣은 HTML 내용이 서버로 전송되는 일은 없으므로 사내 자료처럼 외부에 공개하고 싶지 않은 데이터라도 안심하고 사용할 수 있습니다.
HTML 표 → CSV 변환기 사용법
- HTML 소스를 붙여넣는다 변환하고 싶은 표가 포함된 HTML 소스를 입력란에 붙여넣습니다. 시험 삼아 사용해보고 싶다면 "샘플" 버튼으로 예시를 불러올 수 있습니다.
- 구분자를 선택한다 스프레드시트로 가져올 예정이라면 쉼표를, 탭으로 구분된 텍스트로 다루고 싶다면 탭을 선택합니다.
- 헤더 행 포함 여부를 정한다 "출력에 헤더 행 포함" 체크박스로 변환 결과 첫 줄에 열 이름을 넣을지 여부를 전환할 수 있습니다.
- 변환 결과를 확인한다 붙여넣는 즉시 오른쪽에 CSV/TSV가 표시되며, 성공적으로 변환된 행 수도 함께 표시됩니다.
- 결과를 복사하거나 다운로드한다 "복사" 버튼으로 클립보드에 담거나, "다운로드" 버튼으로 파일로 바로 저장할 수 있습니다.
더 잘 활용하기 위한 팁
<thead>/<tbody>태그가 없는 HTML이라도, 첫 행의 셀이 모두<th>라면 헤더 행으로 자동 인식합니다.- 셀 안의
<strong>,<br>등 장식 태그는 자동으로 제거되며, 텍스트 내용만 CSV로 변환됩니다. - 브라우저에서 다른 사이트의 표를 범위 선택해 복사하면 클립보드에 HTML 형식의 데이터가 함께 담기는 경우가 많아, 그대로 이 도구에 붙여넣어 변환할 수 있습니다.
- 자매 도구인 CSV → HTML 표 변환기와는 반대 방향의 변환으로, 두 도구를 함께 사용하면 CSV와 HTML 표를 자유롭게 오갈 수 있습니다.
HTML 표 → CSV 변환기 활용 사례
다른 사이트의 표를 스프레드시트로 가져오기
뉴스 사이트나 통계 페이지에 실린 표를 개발자 도구로 복사한 뒤, 그대로 엑셀이나 구글 스프레드시트에서 열고 정렬할 수 있는 형식으로 변환합니다.
스크래핑으로 얻은 HTML 정리
프로그램으로 수집한 페이지가 원본 HTML 형태일 때, 그중 표 부분만 추출해 이후 처리나 저장이 쉬운 CSV로 만들 수 있습니다.
CMS나 위키의 표를 데이터화하기
사내 위키나 블로그 글에 손으로 작성된 <table>을 CSV로 내보내면 집계·필터링·검색이 훨씬 수월해집니다.
메일이나 문서에서 복사한 표 재활용
HTML 메일이나 워드 문서에서 복사한 표는 클립보드에 태그 구조가 그대로 남아 있는 경우가 많아, CSV로 변환하면 다른 도구로 전달하기가 한결 쉬워집니다.
CSV → HTML 표 변환기와 함께 오가며 사용하기
반대 방향의 변환 도구와 함께 사용하면, 목적에 따라 CSV와 HTML 표 사이를 자유롭게 오갈 수 있습니다.
HTML 표와 CSV 관련 용어집
- thead / tbody
- HTML 표를 "헤더 부분"과 "본문 부분"으로 나누기 위한 태그입니다.
<thead>안에 행이 있으면 이 도구는 본문 첫 행의 형태와 상관없이 그것을 헤더 행으로 취급합니다. - th / td
- 표의 셀을 나타내는 태그로,
<th>는 헤더 셀을,<td>는 일반 데이터 셀을 나타냅니다. thead가 없는 표에서는 첫 행의 셀이 모두<th>인지를 확인해 헤더 유무를 판단합니다. - CSV(쉼표로 구분된 값)
- 쉼표로 열을 구분하는 일반 텍스트 데이터 형식입니다. 값 자체에 쉼표, 줄바꿈, 큰따옴표가 포함되어 있으면 값 전체를 큰따옴표로 감싸 이스케이프 처리합니다.
- TSV(탭으로 구분된 값)
- 쉼표 대신 탭 문자로 열을 구분하는 형식입니다. 데이터 자체에 쉼표가 자주 포함되는 경우, CSV보다 열 경계가 모호해지기 어렵다는 장점이 있습니다.
- HTML 엔티티
&(&을 나타냄)나 (줄바꿈 없는 공백)처럼 특수 문자를 HTML에서 안전하게 표기하기 위한 표기법입니다. 변환 시 원래 문자로 자동으로 되돌려집니다.- 장식 태그 제거
- 셀 안에 포함된
<strong>,<br>,<a>등의 태그를 제거하고 텍스트 내용만 남기는 처리입니다. 링크의 URL 같은 속성 값은 CSV 결과에 포함되지 않습니다.
자주 묻는 질문
<table> 태그가 포함된 부분을 복사해 붙여넣으세요.<thead> 태그가 없어도 첫 <tr>의 셀이 모두 <th>라면 헤더 행으로 처리됩니다. 이 조건에도 해당하지 않으면 모든 행이 데이터 행으로 그대로 변환됩니다.<table> 태그만 변환 대상이 됩니다. 여러 표를 변환하고 싶다면 각 표의 HTML을 개별적으로 붙여넣어 변환하세요.
여담 ― 브라우저의 "표 복사"에 HTML이 포함되는 이유
브라우저에서 표 범위를 선택해 복사하면, 클립보드에는 눈에 보이는 문자열뿐 아니라 그 이면에 HTML 형식의 데이터도 함께 저장됩니다. 이는 운영체제의 클립보드가 "다중 포맷"을 지원하기 때문으로, 복사한 애플리케이션이 여러 표현 형식(일반 텍스트, HTML, 리치 텍스트 등)을 동시에 기록하고, 붙여넣는 애플리케이션이 자신에게 가장 편한 형식을 골라 받을 수 있는 구조로 되어 있습니다.
Excel이나 스프레드시트에 다른 사이트의 표를 그대로 붙여넣었을 때 서식이나 링크까지 재현되는 것은 바로 이 구조 덕분입니다. 반면 붙여넣는 대상이 단순한 텍스트 에디터나 CSV 파일인 경우, 이 이면의 HTML 정보는 활용되지 못한 채 일반 텍스트로 처리되어 표의 구조(어느 셀이 어느 열에 속하는지)가 사라지기 쉬웠습니다.
HTML 표 → CSV 변환과 같은 도구는 바로 이 "사라지기 쉬운 구조 정보"를 명시적으로 복원하는 역할을 맡습니다. 브라우저의 표 복사 기능이 가진 HTML 구조를 그대로 활용해, 스프레드시트에서 올바르게 열이 나뉜 데이터로 재사용할 수 있게 해주는, 실무에서는 눈에 띄지 않지만 확실한 수요가 있는 분야입니다.