Softonic

CSV에서 HTML 테이블로 변환하기

단계 1 / 2
HTML 표로 변환

블로그 포스트, 내부 위키 또는 이메일 뉴스레터에 데이터 표를 삽입할 경우 일반적으로 CMS의 표 편집기와 문제를 겪게 됩니다. 대신 여기에 CSV 파일을 붙여넣으세요. 첫 번째 행은 <th> 셀로, 두 번째 행부터는 <td>로 표시되며, 전체 내용은 인라인 스타일이 없는 간소한 <table> 요소로 둘러싸입니다. 이는 사이트에서 제공하는 모든 CSS을 사용하는 깔끔한 마크업 방식입니다.

전환 과정의 진행 방식

  1. 1

    CSV 파일을 붙여넣으세요

    줄바꿈을 기준으로 행이 나뉩니다. `str_getcsv`가 각 줄을 파싱하여 따옴표로 묶인 쉼표와 이스케이프된 따옴표까지 정확하게 처리합니다.

  2. 2

    헤더 모드를 전환합니다

    활성화된 상태에서는 첫 번째 행에 `<th>` 셀이 표시되며, 비활성화된 상태에서는 모든 행이 일반적인 `<td>`로 표시됩니다.

  3. 3

    값이 HTML 이스케이프됩니다

    변환기가 Laravel의 e() 헬퍼 함수를 호출하므로 출력 결과에서 `<`, `>`, `&`가 안전하게 이스케이프 처리됩니다.

  4. 4

    마크업을 복사하세요

    HTML은 읽기 편함을 위해 두 개의 공백만큼 인덴팅되어 있습니다. 이를 바로 Blade 파일, Markdown 포스트 또는 WYSIWYG 소스 뷰에 삽입할 수 있습니다.

출력 결과의 스타일링 및 접근성

이 변환기는 구조적으로 간단한 HTML을 출력합니다. 클래스도 없고, 인라인 스타일도 없으며, <thead> 또는 <tbody> 래퍼도 사용되지 않습니다. 이로 인해 출력 결과는 다른 환경에서도 쉽게 활용할 수 있습니다. 다만 필요에 따라 외관을 다듬어 보시는 것도 좋습니다.

최소한의 스타일시트

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
th { background: #f9fafb; font-weight: 600; }
tr:nth-child(even) td { background: #fafafa; }

접근성 빠른 해결 방법

  • 긴 표가 있는 경우 첫 번째 행을 <thead> 형식으로 감싸야 합니다. 이렇게 하면 스크린 리더는 사용자가 행을 이동할 때 헤더 열들을 자동으로 표시합니다. 출력량을 최소화하기 위해 변환기는 이러한 작업을 자동으로 수행하지 않습니다.
  • 표 상단에 <caption> 요소를 추가하고, 해당 데이터가 무엇을 나타내는지 쉬운 말로 설명하세요.
  • 헤더 행이 열을 나타낸다면 <th> 셀에 scope="col"을 사용하고, 첫 번째 열이 행을 식별하는 경우에는 scope="row"를 사용하십시오.

HTML이 적절한 형식이 아닌 경우

출력 대상이 Markdown인 경우에는 대신 CSV를 Markdown으로 변환하는 도구를 사용하세요. 출력 대상이 데이터베이스인 경우에는 CSV를 SQL로 변환하는 도구가 바로 실행할 수 있는 INSERT 문을 생성합니다. HTML 표는 페이지에 표시하는 데 매우 적합하지만, 쿼리나 재정렬이 필요한 작업에는 그다지 적합하지 않습니다.

자주 묻는 질문

네. 값은 Laravel의 e() 헬퍼로 이스케이프 처리되므로 <는 &lt;로 바뀌며, 사용자가 입력한 콘텐츠가 스크립트 태그를 삽입하거나 표를 미리 닫아버릴 수 없습니다.

기본적으로는 출력되지 않습니다. 결과물은 <tr> 자식 요소를 바로 포함하는 단일 <table>입니다. 대상 CSS에서 필요하다면 헤더 <tr>를 <thead>로, 나머지 부분을 <tbody>로 감싸면 됩니다.

줄바꿈이 포함된 셀은 그대로 표시됩니다. 브라우저에서 줄바꿈이 보이도록 하려면 변환 전에 해당 줄바꿈을 <br>로 바꾸거나, <td>의 CSS 속성에 white-space: pre-wrap;을 설정하세요.

네. 표를 만들기 위해 CSV가 당사 서버로 전송됩니다. 저장되지 않으며 페이지 링크에도 추가되지 않습니다.

관련 도구

MP4를 MP3로 변환

MP4 영상에서 오디오 트랙을 뽑아 MP3로 저장합니다. 어디서나 듣고 싶은 뮤직비디오, 팟캐스트, 강의, 음성 클립에 적합합니다.

WebM을 MP4로 변환

더 많은 앱, 기기, 플랫폼과 호환되도록 WebM 영상을 MP4(H.264 영상, AAC 오디오)로 변환하세요. WebM을 업로드하면 서버에서 변환하고 MP4를 다운로드합니다.

vCard → CSV

vCard(.vcf) 내보내기를 붙여넣으면 이름, 이메일, 전화 열이 있는 깔끔한 CSV를 얻습니다. 연락처당 한 행으로, 스프레드시트나 연락처 가져오기에서 바로 열 수 있습니다.

CSV 뷰어

CSV 파일을 열거나 CSV 텍스트를 붙여넣어 표로 확인하세요. 쉼표, 세미콜론, 탭 구분자와 인코딩을 자동으로 감지하고 검색과 정렬도 할 수 있습니다.

ODT를 DOCX로 변환

OpenDocument Text(ODT) 파일을 Word DOCX로 변환해 Microsoft Office를 쓰는 누구나 열고 편집할 수 있게 합니다. 텍스트, 제목, 목록, 기본 서식을 그대로 유지합니다.

Markdown Word 변환기

브라우저에서 Markdown을 편집 가능한 Word DOCX로 변환하세요. 제목, 목록, 코드, GFM 표, 용지 크기, 여백, 글꼴을 지원합니다.

이 도구는 다른 언어로도 제공됩니다