HTML 표 생성기
필요한 표만 만들고, 거의 쓸 엑셀 통째로는 피하기
가격표, 스펙 비교, 배송 요약처럼 작은 표 하나 때문에 엑셀을 열고, 정리가 필요한 HTML을 받아오는 일은 흔합니다. 이 HTML 표 생성기는 행·열 수부터 정하고 셀에 바로 입력해 CMS 블록, 뉴스레터 모듈, 사내 위키에 붙일 `<table>` 코드를 만듭니다. HTML 표 제작 도구를 찾다가 손코딩과 비교 중이라면, 여기서는 작은 격자를 편집하는 흐름에 가깝습니다. 도구 모음에서 구조를 바꾸고, 셀 안에서 서식을 적용하며, 미리보기 창과 HTML 패널이 같이 맞춰집니다. 테이블 HTML을 한 번 만들어 바로 쓰기에 적합합니다.
배포 전에 믿을 수 있는 마크업
4×6 표는 `<td>`만 스물네 개이고, 첫 행이 머리글이면 `<thead>`까지 신경 써야 합니다. 닫는 태그 하나 빠지거나 아래 행과 맞지 않는 `rowspan`만 있어도 메일 템플릿이 깨지거나 CMS가 안전 모드로 들어갑니다. 이 페이지 편집기는 그런 작업을 염두에 두었습니다. 행·열 크기 조정, Shift+클릭 병합, 가격 굵게, 링크 넣기, PC에 있는 이미지를 셀에 바로 넣기까지 격자 안에서 처리합니다. 표 단위로 `border`, `cellpadding`, `width`, `id`, `class`, 테두리 합치기, 몇 가지 색 테마를 지정할 수 있어 셀마다 손으로 칠할 필요가 없습니다. 미리보기에서 모양이 맞으면 HTML 탭으로 가서 조각을 복사하거나, 기본 표 CSS가 들어 있는 전체 문서를 받아 브라우저에서만 확인할 수도 있습니다.
표용 HTML을 만들어 주는 도구 중에는 스프레드시트 보내기만 하거나, 코드만 보여 주고 렌더는 믿기 어려운 경우가 많습니다. 여기서는 편집·미리보기·소스가 묶여 있습니다. 왼쪽에서 고치면 오른쪽에 바로 반영되고, 태그는 한 번의 클릭으로 확인합니다. 병합 뒤 셀이 하나 더 생겼는지, `</th>`가 빠졌는지, 격자에서는 괜찮아 보이는 여백이 iframe에서는 어색한지—붙여넣기 전에 잡기 좋습니다. 처리는 브라우저 안에서 이뤄지며, 표 내용이 변환을 위해 서버로 올라가지 않습니다.
HTML 표 생성기 열기편집과 미리보기를 나란히
격자에서 바꾼 내용이 미리보기와 보낼 문자열에 함께 반영되어 속성이 어떻게 나갈지 추측할 필요가 없습니다.
URL·로컬 이미지
링크나 내 컴퓨터 파일로 제품 사진·아이콘을 셀에 넣을 수 있어 카탈로그·비교표에 유용합니다.
조각 또는 전체 문서
기존 페이지에는 `<table>`만 복사하고, 빠른 확인이 필요하면 완성된 HTML 파일로보냅니다.
이 HTML 표 생성기가 다른 점
격자 편집, 정직한 마크업, 붙여넣기 전에 실수를 잡는 미리보기—엑셀 보내기 한 번 더 하는 흐름이 아닙니다.
빈 격자에서 붙여넣기 가능한 HTML까지 짧게
행·열을 정하고, 필요하면 첫 줄을 `<thead>` 머리글로, 캡션을 넣고, 스프레드시트 보내기 없이 셀을 채웁니다. 행 삽입·열 삭제·셀 병합은 표 메뉴에 모여 있어 화면을 옮기지 않아도 됩니다. 결과는 CMS나 메일 도구가 기대하는 단순한 표 마크업이며, 원치 않는 인라인 스타일 뭉치가 아닙니다.
- 병합·서식이 있는 격자 편집
- 미리보기와 HTML 동기화
- 셀 안 로컬 이미지
- 브라우저 실행·업로드 없음
HTML 표 생성기 사용 방법
표 형태 정하기
행·열 수를 입력하고, 윗줄을 `<th>`로 쓰려면 ‘첫 행을 머리글로’를 켭니다. 표 옵션에서 너비, 테두리, 캡션, 테마를 맞춥니다. 나중에 크기를 바꿔도 격자가 허용하는 범위에서는 병합·내용이 유지됩니다.
셀 채우기·서식
셀을 클릭해 입력합니다. 서식 막대로 강조, 링크, 이미지(URL·로컬)를 넣습니다. 병합은 셀을 클릭한 뒤 Shift+클릭으로 사각형을 잡고 표 메뉴에서 셀 병합을 선택합니다. 분할로 다시 나눌 수 있습니다.
미리보기와 HTML 대조
편집하는 동안 미리보기 탭을 켜 두세요. 병합 뒤 열이 어긋나거나 머리글 rowspan이 어색하면 HTML 탭에서 `colspan`, `rowspan`을 확인합니다. CMS 미리보기 한 번 덜 돌아도 됩니다.
보내기·실제 환경 확인
삽입용 조각을 복사하거나 `.html`을 받거나, 홈 Playground로 보냅니다. 메일 클라이언트와 CMS마다 차이는 남으니 실제 붙여넣기 환경에서 한 번 보는 게 좋습니다. 다만 처음부터 깨진 태그를 고치는 일은 줄일 수 있습니다.
HTML 표 생성기 FAQ
표를 만들 준비가 되셨나요?
격자를 잡고, 미리보기와 HTML이 맞는지 본 뒤 복사하세요.
HTML 표 생성기
- 병합·서식이 있는 격자 편집
- 로컬 이미지·실시간 미리보기
- 조각 또는 전체 HTML 보내기
- No signup; use the tool in the browser
메일·CMS마다 여백이 다릅니다. 붙여넣은 뒤 실제 환경에서 한 번 확인하세요.
바로 붙여넣을 `<table>` HTML
화면에서 만들고, 미리보기로 확인한 뒤, HTML 탭에서 같은 마크업을 복사하세요.