HTML 표 생성기

표 마크업을 손으로 쓰면(모든 <tr>, <th>, <td>와 이스케이프까지) 느리고 실수하기 쉽습니다. CSV나 엑셀·구글 시트에서 복사한 셀을 붙여 넣거나 빈 격자에서 시작하면, <caption>, <thead>, <tbody>, 화면 낭독기가 읽어 주도록 scope가 있는 머리글 셀, 이스케이프된 텍스트, 오른쪽 정렬된 숫자 열을 갖춘 깔끔하고 접근성 좋은 HTML을 얻습니다. <style> 블록의 완성된 스타일, 뉴스레터용 인라인 스타일, 직접 만든 CSS용 클래스 이름만 중에서 고를 수 있습니다.

사용 방법

1. CSV, TSV, 스프레드시트 셀을 붙여 넣거나, 상자를 비워 두고 행과 열 수를 정합니다.
2. 첫 행과 첫 열이 머리글인지 정합니다.
3. 캡션을 추가합니다.
4. 스타일(<style> 블록, 이메일용 인라인 스타일, 클래스만)과 모양을 고릅니다.
5. HTML을 복사합니다.

계산식

<table> → <caption> → <thead><tr><th scope="col"> → <tbody><tr><th scope="row"> / <td>

머리글 셀에는 scope="col"(열 머리글) 또는 scope="row"(각 본문 행의 첫 셀)이 붙어, 데이터 셀을 머리글과 연결해 보조 기기가 이해하게 합니다. 텍스트는 이스케이프되어 < 와 & 같은 문자가 그대로 표시됩니다. 모든 셀이 숫자인 열(천 단위 구분 기호, 통화 기호, %는 허용)은 고정폭 숫자로 오른쪽 정렬됩니다. 인라인 모드는 모든 셀에 스타일을 직접 써 넣으며, 이메일 클라이언트에 필요한 방식입니다.

예시

예제 요금 데이터는 캡션 "요금제와 가격", 머리글 행 요금제 / 가격 / 저장 공간 / 사용자, 본문 세 행의 표가 되며, 각 본문 행의 첫 셀(무료, 팀, 비즈니스)이 행 머리글입니다. 가격($0, $12, $29)은 모두 숫자이므로 오른쪽 정렬되고, 사용자는 "무제한"이 텍스트라서 그렇지 않습니다. 줄무늬 모양은 한 줄 걸러 음영을 주는 <style> 블록을 추가합니다.