HTML 테이블을 더 이상 손으로 짜지 마세요: 테이블 생성기 완벽 가이드 (2026)

HTML 테이블, 아직도 쓰나요? — 네, 여전히 필요합니다

"HTML 테이블"이라는 말을 들으면 90년대 후반 웹사이트가 떠오르는 개발자들이 많을 겁니다. 페이지 전체를 <td> 셀로 나눠 레이아웃을 만들던 그 시절 말이죠. 그 시대의 오명 때문에 오늘날 많은 개발자들이 테이블을 아예 피하고, 실제 표 형식 데이터에도 CSS Grid나 Flexbox를 억지로 끌어다 씁니다.

그런데 솔직히 말하면 — HTML 테이블 자체는 문제가 없었습니다. 문제는 레이아웃에 테이블을 남용한 것이었죠. 데이터를 표로 보여줘야 할 때 테이블을 쓰는 건 여전히 올바른 선택입니다. 2026년에도요.

진짜 고통은 개념이 아니라 보일러플레이트입니다. 열 4개, 행 10개짜리 단순한 테이블도 HTML로 쓰면 60~70줄은 됩니다. 손으로 짜다 보면 닫는 태그 개수를 세고, <tbody> 깜빡하고, 행 정렬이 틀어지고, 어딘가에 오타가 생깁니다. 30초면 끝날 일이 5분으로 늘어나는 전형적인 상황이죠.

그래서 HTML 테이블 생성기 같은 도구가 필요합니다. 테이블을 이해하는 것을 대신해주는 게 아니라, 기계적인 반복 작업을 대신해서 실제 데이터에 집중할 수 있도록 도와주는 도구입니다.

테이블 vs CSS Grid: 뭘 써야 할까

이 질문은 개발 커뮤니티에서 자주 올라오는데, 답은 생각보다 단순합니다.

HTML 테이블을 써야 할 때:

행과 열 관계가 의미 있는 데이터가 있을 때
같은 열의 셀끼리 비교되는 내용일 때
스프레드시트로 만들어도 자연스러운 내용일 때
스크린 리더로 행/열 단위 탐색이 필요한 데이터일 때

CSS Grid를 써야 할 때:

헤더, 사이드바, 메인 콘텐츠, 푸터 같은 페이지 레이아웃을 구성할 때
데이터 의미 관계가 없는 UI 컴포넌트 배치
시각적 배치가 목적인 구조

예를 들어 요금제 비교 표를 만든다고 생각해보세요:

<!-- 이건 표 데이터입니다 — 테이블을 쓰세요 -->
<table>
  <caption>요금제 비교</caption>
  <thead>
    <tr>
      <th scope="col">기능</th>
      <th scope="col">무료</th>
      <th scope="col">프로</th>
      <th scope="col">엔터프라이즈</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">저장 공간</th>
      <td>5 GB</td>
      <td>100 GB</td>
      <td>무제한</td>
    </tr>
  </tbody>
</table>

이 테이블을 감싸는 마케팅 페이지 — 히어로 섹션, 기능 그리드, 후기 — 는 CSS Grid의 영역입니다. 거기에 테이블을 쓰면 시맨틱하게 틀립니다.

WCAG 지침도 명확합니다: 레이아웃 목적으로 테이블을 사용하지 마세요. 구식이어서가 아니라, 스크린 리더가 테이블 역할을 선언하고 셀 단위로 탐색하기 때문에 레이아웃 테이블은 보조 기술 사용자에게 혼란스러운 경험을 만듭니다.

시맨틱 HTML 테이블의 해부학

<table>, <tr>, <td>, <th>는 대부분 알고 있지만, 브라우저와 스크린 리더가 실제로 중요하게 다루는 시맨틱 요소들을 다 쓰는 개발자는 많지 않습니다.

전체 구조

<table>
  <caption>지역별 월간 매출</caption>
  <thead>
    <tr>
      <th scope="col">지역</th>
      <th scope="col">1월</th>
      <th scope="col">2월</th>
      <th scope="col">3월</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">북부</th>
      <td>1,240만원</td>
      <td>1,310만원</td>
      <td>1,470만원</td>
    </tr>
    <tr>
      <th scope="row">남부</th>
      <td>980만원</td>
      <td>1,020만원</td>
      <td>1,150만원</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">합계</th>
      <td>2,220만원</td>
      <td>2,330만원</td>
      <td>2,620만원</td>
    </tr>
  </tfoot>
</table>

각 요소를 살펴보겠습니다.

<caption> — 테이블의 제목입니다. 기본적으로 테이블 위에 렌더링되고, 스크린 리더가 테이블 탐색 전에 먼저 읽어줍니다. 이 요소를 빼면 보조 기술 사용자뿐 아니라 모든 사용자에게 맥락 없는 테이블이 됩니다.

<thead> / <tbody> / <tfoot> — 이 시맨틱 래퍼들은 단순한 코드 정리 이상의 역할을 합니다. 긴 테이블을 인쇄할 때 브라우저가 각 페이지에 <thead>와 <tfoot>을 자동으로 반복해줍니다. 세 가지 모두 쓰면 브라우저에게 각 섹션의 역할을 명확히 알려주는 셈입니다.

<th scope="col"> vs <th scope="row"> — scope 속성은 HTML에서 가장 자주 빠뜨리는 접근성 속성 중 하나입니다. 이 속성은 헤더 셀이 열을 설명하는지, 행을 설명하는지 스크린 리더에게 알려줍니다. 이게 없으면 위의 요금제 테이블을 탐색하는 사용자가 "엔터프라이즈"가 열 헤더인지 행 레이블인지 알 방법이 없습니다.

<td> vs <th> — 데이터 셀과 헤더 셀의 구분입니다. 첫 번째 열의 "북부"라는 셀은 그냥 데이터가 아니라 행 헤더입니다. <th scope="row">로 마크업하세요.

개발자들이 자주 하는 실수들

테이블을 꽤 많이 써봤다면 이 중 적어도 몇 가지는 경험해봤을 겁니다.

`<tbody>` 생략

<tbody> 없이 테이블을 써도 브라우저는 암묵적으로 삽입해서 렌더링합니다. 그래서 눈으로 봤을 때는 아무 문제가 없죠. 하지만 일부 CSS 셀렉터와 JavaScript DOM 탐색이 <tbody> 명시 여부에 따라 다르게 동작합니다. 시맨틱 신호로서도 명시적으로 쓰는 게 낫습니다.

모든 셀에 `<td>` 사용

행 헤더는 <td>가 아닌 <th>로 써야 합니다. CSS 스타일링 후에는 시각적으로 똑같아 보일 수 있지만, 시맨틱 의미가 다릅니다. 스크린 리더는 <th> 셀을 탐색 기준점으로 삼고, <td>는 그냥 데이터로 처리합니다.

caption 없는 테이블

시각적으로 보는 사용자는 테이블을 훑어보며 주변 텍스트와 함께 맥락을 파악합니다. 하지만 스크린 리더 사용자는 주변 문단을 읽지 않고 테이블로 바로 이동할 수 있습니다. <caption>은 그런 사용자에게 즉각적인 맥락을 제공합니다. 디자인상 보이는 캡션이 맞지 않으면 <table> 요소에 aria-label을 쓸 수도 있지만, <caption>이 일반적으로 더 권장됩니다.

레이아웃에 테이블 사용

여전히 일어납니다. HTML 이메일에서는 어느 정도 정당화됩니다 — 이메일 클라이언트들의 CSS 지원이 워낙 제각각이라 테이블 기반 레이아웃이 여전히 신뢰할 수 있는 방법입니다. 하지만 웹 페이지라면 레이아웃에는 CSS Grid나 Flexbox를 쓰세요.

빈 셀 처리 무시

빈 <td>는 유효한 HTML이지만, 스크린 리더가 큰 테이블에서 "빈 칸"을 반복해서 읽으면 혼란스러워질 수 있습니다.  나 aria-label="해당 없음" 같은 처리로 경험을 깔끔하게 만드세요.

접근성 모범 사례

scope 속성

이미 위에서 다뤘지만 따로 강조할 만한 내용입니다. 모든 열 헤더에 scope="col", 모든 행 헤더에 scope="row"를 추가하세요. 셀당 5초면 되는 작업이고, 스크린 리더 사용자에게는 큰 차이를 만듭니다.

색상 대비

WCAG 2.1 AA 기준은 텍스트에 최소 4.5:1의 대비 비율을 요구합니다. 테이블 테두리, 헤더 배경색, 줄무늬 색상이 모두 여기에 해당합니다. 흰 배경에 아주 연한 회색(#f9f9f9) 줄무늬는 보통 통과하지만, 실제로 배포하기 전에 색상 대비 검사 도구로 확인하는 습관을 들이세요.

복잡한 테이블의 headers 속성

다중 레벨 헤더나 여러 열에 걸친 헤더가 있는 복잡한 테이블에서는 scope만으로 충분하지 않을 수 있습니다. 이런 경우 <td> 요소의 headers 속성으로 여러 헤더 셀을 ID로 연결할 수 있습니다. 손으로 작성하기 번거롭기 때문에, 생성기로 기본 구조를 만들고 복잡한 부분만 직접 편집하는 방식이 효율적입니다.

키보드 접근성

테이블 자체는 특별한 포커스 처리가 필요하지 않지만, 헤더에 정렬 버튼이 있거나 셀에 링크가 있는 경우 그 요소들이 키보드로 접근 가능한지 반드시 확인하세요.

HTML 테이블 생성기 활용하기

HTML 테이블 생성기는 구조적인 보일러플레이트를 대신 작성해줘서 닫는 태그를 세는 일을 없애줍니다. 행과 열 수를 설정하고, 헤더 행 포함 여부를 선택하고, <thead>, <tbody>, <caption> 옵션을 켜면 바로 사용 가능한 HTML이 나옵니다.

몇 가지 솔직한 특징을 말씀드리겠습니다.

잘 생성해주는 것: <caption>, <thead>, <tbody>, <tfoot>, scope 속성이 있는 <th>, <td>를 포함한 완전한 시맨틱 구조. 어떤 프로젝트에도 바로 붙여넣을 수 있는 깔끔한 출력입니다.

직접 수정해야 하는 것: colspan과 rowspan을 이용한 셀 병합은 지원하지 않습니다. 생성기는 균일한 그리드를 만들기 때문에 셀 병합이 필요하면 생성된 HTML을 직접 편집해야 합니다. 인라인 CSS도 포함되지 않아 스타일링은 별도 스타일시트에서 처리해야 합니다.

가장 효율적인 워크플로우: 생성기로 뼈대를 만들고, 에디터에 붙여넣고, 실제 데이터를 채운 뒤 colspan/rowspan 조정이 필요한 부분만 편집하세요. 처음부터 70줄을 손으로 타이핑하는 것보다 훨씬 빠릅니다.

CSS 스타일링 팁

기본 HTML 테이블은 날 것 그대로 보기 거북합니다. 대부분의 필요를 커버하는 기본 스타일시트입니다:

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

caption {
  font-weight: 600;
  text-align: left;
  padding-bottom: 0.5rem;
  color: #374151;
}

th,
td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

thead th {
  background-color: #f3f4f6;
  font-weight: 600;
  color: #111827;
}

tbody tr:hover {
  background-color: #f9fafb;
}

tfoot td,
tfoot th {
  font-weight: 600;
  border-top: 2px solid #d1d5db;
}

줄무늬 행

행이 많은 넓은 테이블에서는 줄무늬 행이 가독성을 높여줍니다:

tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

반응형 테이블

모바일에서 HTML 테이블이 까다로워지는 부분입니다. 열 6개짜리 테이블이 375px 화면에서 자연스럽게 접히지 않습니다. 가장 간단한 해결책은 스크롤 가능한 래퍼입니다:

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

<div class="table-wrapper">
  <table>...</table>
</div>

모바일에서 실제로 쌓이는 레이아웃을 원한다면 display: block 방식도 있지만 CSS가 더 복잡해지고 data-label 속성 트릭이 필요합니다. 스크롤 래퍼로 시작하고, 그게 정말 문제가 되는 경우에만 더 나아가세요.

마치며

HTML 테이블이 오해받는 이유는 충분히 있습니다. 오랫동안 레이아웃 목적으로 남용됐으니까요. 하지만 재무 보고서, 비교 차트, 일정, 데이터 그리드 같은 표 형식 데이터에는 여전히 시맨틱하게 올바른 도구이고, 다른 걸 쓰면 오히려 접근성이 나빠집니다.

손으로 테이블 짜기가 번거롭다는 건 테이블이 적절한 도구인지 여부와는 별개의 문제입니다. 생성기가 보일러플레이트를 처리해주지만, 시맨틱을 이해하는 건 여전히 개발자의 몫입니다. scope가 뭘 하는지 알아두세요. <caption>을 쓰세요. 행을 <thead>와 <tbody>로 감싸세요. 단순한 모범 사례가 아니라, 테이블을 모든 사람이 쓸 수 있게 만드는 기본입니다.

HTML 테이블 생성기로 시작해서 데이터를 채우고, 시맨틱 디테일에 5분을 투자하세요. 70줄을 손으로 타이핑하다 <caption>까지 빠뜨리는 것보다 훨씬 나은 워크플로우입니다.