CSV에서 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가 당사 서버로 전송됩니다. 저장되지 않으며 페이지 링크에도 추가되지 않습니다.

관련 도구