03 · Components · 표현

테이블Table

숫자·메타데이터·비교가 필요한 정보를 정렬해 보여주는 기본 수단. 반드시 진짜 표일 때만 사용하세요 — 레이아웃 용도로 쓰지 않습니다.

StableWCAG AA

기본 테이블

tsx

<table className="w-full border border-[color:var(--color-border)] text-left text-[13.5px]">
  <thead className="bg-[color:var(--color-gray-50)] text-[color:var(--color-text-muted)]">
    <tr>
      <th className="px-4 py-3 font-medium">토큰</th>
      <th className="px-4 py-3 font-medium">값</th>
      <th className="px-4 py-3 font-medium">용도</th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-t border-[color:var(--color-border)]">
      <td className="px-4 py-3 font-en">--color-brand</td>
      <td className="px-4 py-3 font-en text-[color:var(--color-text-muted)]">navy-700</td>
      <td className="px-4 py-3 text-[color:var(--color-text-muted)]">브랜드 기본</td>
    </tr>
    <tr className="border-t border-[color:var(--color-border)]">
      <td className="px-4 py-3 font-en">--color-accent</td>
      <td className="px-4 py-3 font-en text-[color:var(--color-text-muted)]">blue-500</td>
      <td className="px-4 py-3 text-[color:var(--color-text-muted)]">링크·포커스</td>
    </tr>
  </tbody>
</table>

미리보기

토큰	값	용도
--color-brand	navy-700	브랜드 기본
--color-accent	blue-500	링크·포커스

반응형 전략

좁은 화면에서는 테이블이 가로 스크롤되거나, 카드 리스트로 재구성됩니다. 이 시스템의 기본 전략은 overflow-x: auto + 첫 번째 열 sticky. 칼럼이 6개를 넘어가면 카드 변환을 권장합니다.

기본 테이블

반응형 전략

도움이 필요하신가요?