시각적으로 표를 만들고 깔끔한 HTML을 얻으세요. 왼쪽에서 구조를 설정하고(행, 열, 헤더, 캡션, 테두리, 색상, 정렬), 그리드에 바로 입력하거나 TSV / CSV / Excel 데이터를 붙여넣으세요. HTML은 실시간으로 생성되어 코드와 샌드박스 실시간 미리보기 둘로 표시됩니다. 클래식 출력(border / cellpadding 속성) 또는 모던 출력(인라인 CSS)을 고르고, 코드를 복사하거나 자립형 .html 파일로 내려받으세요. 모든 것이 로컬에서 실행됩니다 — 아무것도 업로드되지 않습니다.
크기
구조
크기 & 테두리
외관
출력
탭/줄 바꿈으로 구분된 데이터(Excel 또는 TSV) 또는 쉼표로 구분된 데이터(따옴표 지원 CSV)를 붙여넣으세요.
셀5 × 5행/열 가장자리의 작은 ×를 클릭하면 제거됩니다
셀에 입력하거나 생성을 눌러 HTML을 만드세요.
HTML 코드
미리보기
샌드박스 - 스크립트 비활성
팁: 셀 내용은 기본적으로 HTML 이스케이프되어 <script> 같은 입력이 생성된 코드나 미리보기를 망가뜨릴 수 없습니다. 의도적으로 마크업을 넣으려는 경우에만 "셀 HTML 이스케이프"를 끄세요. Excel 행은 TSV로 붙여넣으세요("데이터 가져오기..." 버튼이 탭과 쉼표를 자동 감지합니다). 그리드는 최대 100행 × 30열을 지원하며 미리보기 iframe은 샌드박스입니다(스크립트 없음).
의미 있는 표
<th scope="col">와 scope="row"는 스크린 리더에게 각 헤더가 무엇을 설명하는지 알려 주고, <caption>은 표 전체의 이름을 붙입니다. colspan과 rowspan은 실제로 병합된 데이터를 위한 것이지만, 시각적 레이아웃에 쓰면 파서를 혼란스럽게 합니다.
데이터 관계에는 표를, 레이아웃에는 CSS 그리드나 플렉스박스를 사용하세요 — 레이아웃용 표는 접근성과 반응형 모두에 해롭습니다.
