Softonic

HTML 테이블 생성기

단계 1 / 4

따옴표로 감싼 CSV 필드, 스프레드시트의 탭, 세미콜론 구분 행, Markdown 구분 행을 지원합니다. 최대 50행, 20열, 셀당 1,000자입니다.

표 데이터
표 데이터

10행짜리 데이터셋에 대해 <table>, <thead>, <tbody>, <tr>를 수작업으로 입력하는 것은 매우 번거로운 작업입니다. 탭으로 구분된 CSV 또는 Markdown 형태의 표 데이터를 붙여넣기만 하면, 이 생성기는 의미적 태그와 선택 가능한 <caption>, 적절한 범위 속성, 그리고 제브라 스트라이핑, 테두리 또는 Tailwind 클래스 중에서 원하는 옵션을 포함한 잘 구성된 HTML을 출력합니다. 이 결과는 기사나 대시보드에 바로 사용할 수 있습니다.

HTML 표를 작성하는 방법

  1. 1

    데이터를 붙여넣으세요

    TSV(스프레드시트에서 복사한 값), CSV 또는 마크다운 테이블 형식 모두 정확하게 파싱됩니다.

  2. 2

    표 옵션 선택

    헤더 행, 캡션, 제브라 줄무늬, 컴팩트하거나 여유로운 행 간격을 선택합니다.

  3. 3

    스타일링 모드를 선택하세요

    정형 HTML, 인라인 스타일, 부트스트랩 클래스 또는 테일윈드 클래스.

  4. 4

    마크업을 복사하세요

    출력된 내용은 유효하고 의미 있는 HTML로 구성되어 있으며, 표로 위장한 `<div>` 그리드가 아닙니다.

의미적 표 구조

적절한 태그가 적용된 테이블은 접근이 용이하고 스크린 리더와 호환되며 스타일링도 간편합니다. 생성기는 다음과 같은 구조를 생성합니다:

<table>
  <caption>1분기 매출 실적</caption>
  <thead>
    <tr>
      <th scope="col">지역</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 확장 프로그램을 사용하여 확인하세요.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다