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 표.

FPS 카운터

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

HTML 문자 참조

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

색상 혼합기

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

키보드 단축키 참고표

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

색상 틴트 생성기

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

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