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 확장 프로그램을 사용하여 확인하세요.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

색상 혼합기

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

PHP 포매터

간단한 PHP 코드에 줄바꿈과 2칸 또는 4칸 들여쓰기를 추가합니다. 결과를 반드시 검토하세요. PHP 파서나 PSR-12 적용 도구가 아닙니다.

OpenAPI 검증기

OpenAPI 또는 Swagger 문서를 JSON이나 YAML로 붙여넣고 핵심 구조를 점검하세요: 버전 필드, info 객체, paths를 명확한 오류와 경고와 함께 확인합니다.

CSS 로딩 애니메이션 생성기

순수 CSS로 원형 스피너를 만듭니다. 지름, 테두리 두께, 포인트 색상, 회전 속도를 설정하고 미리 보기를 확인한 뒤 바로 쓸 수 있는 CSS를 복사하세요. SVG도 자바스크립트도 필요 없습니다.

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