liminfo

HTML Table to JSON

HTML 테이블을 JSON/CSV/Excel로 변환하는 도구

HTML Table to JSON 소개

HTML Table to JSON는 브라우저에서 HTML 테이블 요소를 JSON 객체 배열로 변환하는 도구입니다. 브라우저의 기본 DOMParser API를 사용하여 HTML 입력을 파싱하고, 첫 번째 테이블 요소를 찾아 첫 번째 행을 열 헤더로 읽습니다(th 또는 td 셀 사용). 나머지 행을 순회하며 각 행당 하나의 JavaScript 객체를 만들어 셀의 텍스트 내용을 헤더 키에 매핑합니다. 결과는 2칸 들여쓰기의 포맷된 JSON으로 출력됩니다.

웹 스크래핑, 데이터 엔지니어링, 웹 페이지의 표 데이터를 다루는 개발자들이 커스텀 파서를 작성하지 않고 구조화된 데이터를 빠르게 추출할 때 이 도구를 사용합니다. 웹 페이지 소스 코드에서 HTML 테이블을 복사해 붙여넣으면 REST API에 바로 사용하거나 데이터베이스에 삽입하거나 JavaScript 애플리케이션에서 처리할 수 있는 깔끔한 JSON 배열을 얻을 수 있습니다.

변환 전 입력을 검증합니다: 테이블 요소가 있는지, 최소 두 행(헤더 행 하나와 데이터 행 하나)이 있는지 확인합니다. 검증에 실패하면 명확한 오류 메시지가 표시됩니다. 출력에는 JSON 결과를 빠르게 추출하기 위한 클립보드 복사 버튼이 포함됩니다.

주요 기능

  • 브라우저 기본 DOMParser API 사용 — 서드파티 파싱 라이브러리 불필요
  • 붙여넣은 HTML에서 첫 번째 <table> 요소 자동 감지
  • 첫 번째 행의 th 및 td 셀을 JSON 객체의 열 헤더 키로 읽기
  • 이후 각 테이블 행을 헤더 키와 셀 텍스트 값이 있는 별도의 JSON 객체로 매핑
  • 행의 셀이 헤더보다 적은 경우 col{n} 폴백 이름 사용하여 안정적 처리
  • 입력 검증: 테이블이 없거나 두 행 미만인 경우 명확한 오류 메시지 표시
  • 가독성을 위한 2칸 들여쓰기의 포맷된 JSON 출력
  • JSON 출력을 클립보드로 원클릭 복사

자주 묻는 질문

이 도구는 어떤 HTML 입력을 받나요?

<table> 요소가 포함된 HTML 스니펫을 받습니다. 완전한 HTML 페이지나 테이블 마크업만 붙여넣을 수 있습니다. 브라우저의 DOMParser를 사용해 첫 번째 테이블을 찾습니다. 테이블에는 헤더 행 하나와 데이터 행 하나 이상, 총 두 행 이상이 있어야 합니다.

JSON 키는 어떻게 결정되나요?

테이블의 첫 번째 행이 헤더 행으로 읽힙니다. 해당 행의 각 셀(<th> 또는 <td>)이 JSON 객체의 키가 됩니다. 셀이 비어 있으면 열 인덱스를 기반으로 col0, col1 등의 키로 대체됩니다.

데이터 행의 셀이 헤더 행보다 적으면 어떻게 되나요?

데이터 행의 셀이 헤더 행보다 적으면 해당 행의 JSON 객체에서 누락된 열이 생략됩니다. 오류가 발생하지 않으며, 존재하는 각 셀을 처리하여 해당 헤더 키에 매핑합니다.

병합 셀(colspan/rowspan)이 있는 테이블도 변환할 수 있나요?

병합 셀(colspan과 rowspan)은 별도로 처리되지 않습니다. DOMParser는 DOM에 나타나는 대로 각 셀을 개별적으로 읽습니다. 병합 셀은 시작 위치에서 단일 셀로 읽힙니다. 복잡한 스패닝 테이블의 경우 출력이 완벽하지 않을 수 있으므로 JSON을 검토하세요.

웹 페이지에서 테이블 HTML을 어떻게 가져오나요?

브라우저에서 웹 페이지의 테이블을 우클릭하고 검사(또는 요소 검사)를 선택하세요. 개발자 도구의 요소 패널에서 table 노드를 우클릭하고 복사 > outerHTML 복사를 선택하세요. 그런 다음 해당 HTML을 이 도구에 붙여넣으면 됩니다.

JSON 출력 형식은 어떻게 되나요?

출력은 JSON.stringify(data, null, 2)로 2칸 들여쓰기 포맷이 적용된 JSON 배열입니다. 배열의 각 객체는 테이블의 데이터 행 하나를 나타내며, 헤더 행에서 가져온 키와 해당 셀의 트리밍된 순수 텍스트 문자열 값을 가집니다.

하나의 HTML 문서에서 여러 테이블을 변환할 수 있나요?

현재 이 도구는 입력 HTML에서 첫 번째로 발견된 테이블만 변환합니다. 여러 테이블을 변환하려면 각 테이블을 따로 붙여넣어 각각 변환 작업을 실행하세요.

출력은 항상 배열인가요?

네. 테이블에 데이터 행이 하나뿐이더라도 출력은 항상 JSON 배열입니다. 배열의 각 요소는 한 행을 나타내는 객체입니다. 이 형식은 REST API, 데이터베이스, 대부분의 JavaScript 데이터 처리 워크플로에서 바로 사용할 수 있습니다.