HTML 테이블 생성기
시각적 편집기로 HTML 테이블을 만들고 코드를 바로 복사하세요.
HTML 출력
<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 8px; text-align: left;">Header 1</th>
<th style="padding: 8px; text-align: left;">Header 2</th>
<th style="padding: 8px; text-align: left;">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px;">Cell 1,1</td>
<td style="padding: 8px;">Cell 1,2</td>
<td style="padding: 8px;">Cell 1,3</td>
</tr>
<tr>
<td style="padding: 8px;">Cell 2,1</td>
<td style="padding: 8px;">Cell 2,2</td>
<td style="padding: 8px;">Cell 2,3</td>
</tr>
<tr>
<td style="padding: 8px;">Cell 3,1</td>
<td style="padding: 8px;">Cell 3,2</td>
<td style="padding: 8px;">Cell 3,3</td>
</tr>
</tbody>
</table>이 도구 소개
HTML 테이블 생성기는 행과 열 수를 설정하고 셀을 직접 편집하여 즉시 사용 가능한 HTML 테이블 코드를 만들어 줍니다. 헤더 행, 테두리, 줄무늬 행, 셀 패딩을 시각적으로 설정할 수 있습니다.
생성된 HTML은 thead, tbody 구조를 포함하며 접근성에 유리한 시맨틱 마크업을 따릅니다. 코드는 편집할 때마다 실시간으로 업데이트됩니다.
사용 방법
- 행 수와 열 수를 설정하세요.
- 헤더 행, 테두리, 줄무늬 여부를 체크박스로 선택하세요.
- 셀 패딩 값을 조정하세요.
- 각 셀을 직접 클릭하여 내용을 입력하세요.
- "HTML 출력" 아래 코드를 복사하여 사용하세요.
활용 사례
데이터 비교표, 요금 안내표, 스케줄표, 제품 스펙 테이블 등 웹페이지에서 표 형식으로 정보를 보여줄 때 활용하세요.
자주 묻는 질문
- CSS 없이 테이블 스타일링이 가능한가요? — 네, 생성된 HTML에 border 속성과 cellpadding이 포함되어 CSS 없이도 기본 스타일이 적용됩니다.
- 테이블에 colspan이나 rowspan을 추가할 수 있나요? — 이 도구는 기본 테이블 구조를 생성합니다. colspan/rowspan은 생성된 코드를 직접 수정하여 추가하세요.
- 테이블을 반응형으로 만들려면 어떻게 하나요? — 테이블을 overflow-x: auto 속성을 가진 div로 감싸거나, CSS 미디어 쿼리를 사용하여 작은 화면에서도 스크롤 가능하게 만드세요.