Components · 데이터

Table (표)

행과 열로 데이터를 비교·조회한다. 헤더는 네이비 솔리드, 숫자 열은 자릿수 정렬(.num).

정의

행과 열로 정렬된 데이터를 비교·조회하도록 보여주는 컴포넌트다.

Anatomy

부위	토큰
① 헤더	bg `--table-header-bg`(네이비) · 글자 `--table-header-fg`(흰) · 굵기 `--font-weight-bold`
② 셀·보더	경계 `--table-cell-border`(1px) · 글자 `--text-body-sm`
③ 짝수 행	bg `--table-row-alt-bg`(연그레이) — zebra 가독성
④ 숫자 열	`font-variant-numeric: tabular-nums` + 우측 정렬(`.num`)

변형

변형	용도
기본	비교·조회용 데이터 표
Compact	행이 많은 카탈로그(패딩 축소) — `.pi-table--compact`

상태

상태	값
Default	헤더 `--table-header-bg` · 셀 보더 `--table-cell-border` · 짝수 행 `--table-row-alt-bg`
Hover(행, 선택)	행 bg `--color-bg-subtle` — 열이 많은 표에서 행 추적용(선택 적용)

Do / Don't

금액·수량·수치는 .num으로 우측 정렬 + tabular-nums — 자릿수가 세로로 맞아 비교가 쉽다.
헤더는 <th scope>로 지정해 어떤 열·행의 제목인지 스크린리더가 읽게 한다.
열이 많으면 표를 가로 스크롤 컨테이너에 담아 모바일 잘림을 막는다.

Don't

모든 칸에 배경색을 채우지 말 것 — zebra는 짝수 행에만, 강조는 최소로.
숫자를 좌측·가운데 정렬하지 말 것 — 자릿수 비교가 어긋난다.
표로 화면 레이아웃(칸 나누기)을 만들지 말 것 — 표는 데이터 전용이다.

콘텐츠 규칙

헤더 라벨은 명사로 짧게("제품", "월 구독료", "인증") — 문장 금지.
금액은 천단위 쉼표 + 단위, 숫자 뒤 단위는 붙여 쓴다("132,000원", "3종", "5개월").
빈 셀은 공백 대신 "—"로 "없음"을 명시한다.
단위는 헤더에 표기("월 구독료(원)")하고 셀에는 숫자만 둔다.

키보드 인터랙션

해당 없음 — 정적 표는 포커스를 받지 않는다. 셀 안에 링크·버튼이 있으면 그 요소 자체의 키보드 규칙(Link·Button)을 따른다.

접근성

<table> + <thead>/<tbody> 구조, 헤더 셀은 <th scope="col">·scope="row">로 지정한다.
표의 목적은 <caption>으로 제공한다(시각적으로 숨겨도 됨).
zebra·정렬은 시각 보조일 뿐 의미 전달은 마크업(scope)이 맡는다.
색 대비: 헤더 흰 글자 on 네이비(--table-header-bg)는 AA 이상. 기준: ../guidelines/accessibility.md.

코드

디자인구독 제품 비교 (예시 데이터)
제품	주 소재	월 구독료(원)	인증
친환경 그래픽 노면표시재	바닥(노면)	132,000	GREENGUARD GOLD
직물시트	벽면	98,000	KC
홍보판촉물	판촉	—	—

html

<div class="pi-table-wrap">
  <table class="pi-table">
    <caption class="pi-table__caption">디자인구독 제품 비교 (예시 데이터)</caption>
    <thead>
      <tr>
        <th scope="col">제품</th>
        <th scope="col">주 소재</th>
        <th scope="col" class="num">월 구독료(원)</th>
        <th scope="col">인증</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">친환경 그래픽 노면표시재</th>
        <td>바닥(노면)</td>
        <td class="num">132,000</td>
        <td>GREENGUARD GOLD</td>
      </tr>
      <tr>
        <th scope="row">직물시트</th>
        <td>벽면</td>
        <td class="num">98,000</td>
        <td>KC</td>
      </tr>
      <tr>
        <th scope="row">홍보판촉물</th>
        <td>판촉</td>
        <td class="num">—</td>
        <td>—</td>
      </tr>
    </tbody>
  </table>
</div>

css

.pi-table-wrap { overflow-x: auto; }
.pi-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--text-body-sm);
  color: var(--color-text-primary);
  word-break: keep-all;
}
.pi-table__caption {
  margin-bottom: var(--space-2);
  font: var(--text-caption);
  color: var(--color-text-muted);
  text-align: left;
}
.pi-table th,
.pi-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-thin) solid var(--table-cell-border);
  text-align: left;
}
.pi-table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-fg);
  font-weight: var(--font-weight-bold);
}
.pi-table tbody tr:nth-child(even) { background: var(--table-row-alt-bg); }
.pi-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pi-table--compact th,
.pi-table--compact td { padding: var(--space-2) var(--space-3); }

Changelog

날짜	변경
2026-07-15	문서 계약(10섹션) 적용 — Anatomy 도해·숫자 열 tabular-nums·Compact 변형·콘텐츠 규칙·코드 신설, 기존 규격 승계