분류: 개발 도구

HTML 표 생성기

자체 기획 도구찾는 도구가 없나요?

간단한 텍스트로 이스케이프 처리된 HTML 표 마크업 만들기

쉼표로 구분된 헤더 셀과 한 줄에 하나씩 쉼표로 구분된 행을 입력해 HTML 표 마크업을 생성하세요. CSS 클래스 이름은 선택 사항입니다. 모든 셀 값은 HTML 이스케이프 처리됩니다. 모든 처리는 브라우저 안에서만 이루어집니다.

브라우저에서 2개 행으로 표를 생성했습니다.

HTML
<table>
  <thead>
    <tr><th>Name</th><th>Score</th><th>Team</th></tr>
  </thead>
  <tbody>
    <tr><td>Ava</td><td>92</td><td>Blue</td></tr>
    <tr><td>Noah</td><td>88</td><td>Green</td></tr>
  </tbody>
</table>

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

작은 HTML 표 하나가 필요할 때 마크업을 손으로 입력하는 것은 데이터를 입력하는 것보다 느립니다. 이 도구는 쉼표로 구분된 헤더 한 줄과 행마다 쉼표로 구분된 한 줄씩을 받아, 텍스트에 포함된 `<`나 `&` 같은 문자가 마크업으로 읽히지 않도록 모든 셀을 이스케이프 처리한 뒤, 선택한 CSS 클래스 이름과 헤더를 입력했다면 `<thead>`, 행을 담은 `<tbody>`를 포함한 `<table>`을 작성합니다.

사용 방법

  1. 쉼표로 구분해 헤더 셀을 입력하거나, 헤더 없는 표를 만들려면 비워 둡니다.
  2. 한 줄에 하나씩, 셀은 쉼표로 구분해 행을 입력합니다.
  3. 필요하면 CSS 클래스 이름을 설정한 뒤 생성된 HTML을 복사합니다.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

제 데이터가 어딘가로 업로드되나요?
아니요. HTML은 페이지 안에서 실행되는 JavaScript로 생성되므로 입력한 내용이 기기 밖으로 나가지 않습니다.
생성된 HTML을 페이지에 붙여넣어도 안전한가요?
모든 셀 값은 마크업에 기록되기 전에 HTML 이스케이프 처리되므로, 텍스트에 포함된 `<`, `&`, `"` 같은 문자가 태그나 속성으로 해석될 수 없습니다.
헤더 행 없이 표를 만들 수 있나요?
네. 헤더 입력란을 비워 두면 `<thead>` 없이 `<tbody>`만 있는 표가 작성됩니다.