HTML 테이블 생성기

시각적 에디터로 HTML 테이블을 만듭니다. 행, 열, 정렬, 헤더, 테두리, 줄무늬를 커스터마이즈하고 깔끔한 HTML 코드를 바로 복사하세요.

4
4
1:
2:
3:
4:
 
<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
    </tr>
    <tr>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
    </tr>
    <tr>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
    </tr>
  </tbody>
</table>
모든 테이블 생성은 브라우저에서 처리됩니다. 셀 내용은 보안을 위해 자동으로 HTML 이스케이프됩니다.

사용 방법

  1. 1

    테이블 크기 설정

    +/- 버튼으로 행과 열 수를 조정합니다. 최대 20행, 12열까지 지원합니다.

  2. 2

    셀 내용 입력

    그리드 에디터에서 셀을 클릭하여 내용을 입력합니다. "헤더 행"이 활성화되면 첫 번째 행이 헤더가 됩니다.

  3. 3

    스타일 커스터마이즈

    테두리, 줄무늬 행, 헤더 배경, 반응형 래퍼 옵션을 토글하여 테이블을 꾸밉니다.

  4. 4

    HTML 복사

    "복사"를 클릭하여 생성된 HTML 테이블 코드를 복사합니다.

자주 묻는 질문

이메일에서 사용할 수 있나요?
네! 인라인 스타일을 사용하여 외부 CSS를 제거하는 이메일 클라이언트와 호환됩니다.
콘텐츠가 이스케이프되나요?
네. 모든 셀 내용은 XSS 공격을 방지하기 위해 자동으로 이스케이프됩니다.
열 정렬을 설정할 수 있나요?
네! 정렬 버튼(← ↔ →)으로 각 열의 정렬을 독립적으로 설정할 수 있습니다.
반응형 래퍼란?
"반응형 래퍼"를 활성화하면 테이블이 overflow-x: auto가 있는 div로 감싸져 작은 화면에서 가로 스크롤이 가능합니다.