HTML 테이블 생성기
붙여 넣은 데이터, 셀 내용, 생성된 HTML은 이 브라우저 안에만 남습니다. 단계 사이의 값은 이 탭의 세션 저장소에 보관되며 당사 서버로 전송되거나 URL에 포함되지 않습니다.
따옴표로 감싼 CSV 필드, 스프레드시트의 탭, 세미콜론 구분 행, Markdown 구분 행을 지원합니다. 최대 50행, 20열, 셀당 1,000자입니다.
10행짜리 데이터셋에 대해 <table>, <thead>, <tbody>, <tr>를 수작업으로 입력하는 것은 매우 번거로운 작업입니다. 탭으로 구분된 CSV 또는 Markdown 형태의 표 데이터를 붙여넣기만 하면, 이 생성기는 의미적 태그와 선택 가능한 <caption>, 적절한 범위 속성, 그리고 제브라 스트라이핑, 테두리 또는 Tailwind 클래스 중에서 원하는 옵션을 포함한 잘 구성된 HTML을 출력합니다. 이 결과는 기사나 대시보드에 바로 사용할 수 있습니다.
HTML 표를 작성하는 방법
-
1
데이터를 붙여넣으세요
TSV(스프레드시트에서 복사한 값), CSV 또는 마크다운 테이블 형식 모두 정확하게 파싱됩니다.
-
2
표 옵션 선택
헤더 행, 캡션, 제브라 줄무늬, 컴팩트하거나 여유로운 행 간격을 선택합니다.
-
3
스타일링 모드를 선택하세요
정형 HTML, 인라인 스타일, 부트스트랩 클래스 또는 테일윈드 클래스.
-
4
마크업을 복사하세요
출력된 내용은 유효하고 의미 있는 HTML로 구성되어 있으며, 표로 위장한 `<div>` 그리드가 아닙니다.
의미적 표 구조
적절한 태그가 적용된 테이블은 접근이 용이하고 스크린 리더와 호환되며 스타일링도 간편합니다. 생성기는 다음과 같은 구조를 생성합니다:
<table>
<caption>Q1 sales figures</caption>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">EU</th>
<td>$120k</td>
<td>$145k</td>
</tr>
</tbody>
</table>
요소들과 그 역할
| 요소 | 목적 |
|---|---|
<caption> |
표 요약; 스크린 리더에서 먼저 읽음 |
<thead> |
열 제목은 본문과 별도로 표시됩니다 |
<tbody> |
데이터 행 |
<tfoot> |
총합 및 각주는 코드 위치와 관계없이 하단에 표시됩니다 |
<th scope="col"> |
열 제목 |
<th scope="row"> |
행 헤더 (예: 각 행의 첫 번째 셀) |
<td> |
데이터 셀 |
반응형 패턴
- 수평 스크롤:
<div style="overflow-x:auto">형식으로 표를 래핑하여 좁은 뷰포트에서도 레이아웃이 깨지지 않도록 스크롤할 수 있습니다. - 모바일용 스택 기능:
data-label속성과 같은 헤더를 반복하고 CSS를 사용하여 행을 수직 카드 형태로 전환합니다. 소규모 데이터셋에 적합합니다. - 그리드 기반 리플로우: 복잡한 표는 CSS 그리드를 사용하여 재구성할 수 있지만 기본 키보드 내비게이션 기능을 상실하므로 대시보드에만 적합합니다.
접근성 점검 목록
- 모든
<th>에scope속성을 지정합니다. - 복잡한 셀 병합에는
headers="..."를 사용하여 데이터 셀을 헤더 ID와 연결합니다. - 캡션으로 표의 목적을 요약합니다.
- 시각적 레이아웃 용도로 표를 사용하지 마십시오. 대신 CSS 그리드나 Flexbox를 사용하십시오.
자주 묻는 질문
네. 스프레드시트의 클립보드 데이터는 TSV(탭으로 구분된 형식)이며, 생성기가 이를 기본적으로 파싱합니다. 행은 <tr>로, 탭으로 구분된 셀은 <td>로 변환됩니다.
제어하는 모든 요소에 사용할 CSS 클래스; 외부 스타일시트가 종종 차단되는 이메일에는 인라인 스타일을 적용합니다. Bootstrap 및 Tailwind 모드는 해당 프레임워크용으로 바로 사용 가능한 클래스 마크업을 제공합니다.
자동 병합은 지원하지 않습니다. 가져온 값 하나가 셀 하나가 됩니다. HTML을 복사한 뒤 colspan 또는 rowspan을 직접 추가하고, 병합 셀에는 id와 headers 속성이 필요할 수 있으므로 머리글 연결을 확인하세요.
네, scope="col" 및 scope="row" 속성이 추가되며, 캡션을 지정하면 <caption>가 생성됩니다. 복잡한 표의 경우 스크린 리더 또는 axe DevTools 확장 프로그램을 사용하여 확인하세요.
관련 도구
랜덤 영어 글자 생성기
A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.
랜덤 색상 팔레트 생성기
2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.
Base64 → Hex 변환기
Base64 문자열을 실제 바이트로 디코딩한 뒤 16진수로 표현합니다. 토큰, 키, 인증서, JWT를 살펴볼 때 유용합니다.
2진수를 10진수로 변환
2진수를 즉시 10진수로 변환합니다. 각 비트가 어떻게 기여하는지 볼 수 있도록 자릿값 전개를 보여줍니다.
불 대수 간소화 도구
Karnaugh map과 Quine-McCluskey 알고리즘으로 불 대수 식을 간소화합니다. 모든 최소화 단계와 최종 SOP/POS 형태를 보여줍니다.
2진수 8진수 변환기
비트를 세 개씩 묶어 2진수를 8진수로 변환합니다. Unix 권한, 레거시 시스템, 간결한 숫자 표시에 유용합니다.