03 · Components · 표현
테이블Table
숫자·메타데이터·비교가 필요한 정보를 정렬해 보여주는 기본 수단. 반드시 진짜 표일 때만 사용하세요 — 레이아웃 용도로 쓰지 않습니다.
StableWCAG AA
기본 테이블
| 토큰 | 값 | 용도 |
|---|---|---|
| --color-brand | navy-700 | 브랜드 기본 |
| --color-accent | blue-500 | 링크·포커스 |
반응형 전략
좁은 화면에서는 테이블이 가로 스크롤되거나, 카드 리스트로 재구성됩니다. 이 시스템의 기본 전략은 overflow-x: auto + 첫 번째 열 sticky. 칼럼이 6개를 넘어가면 카드 변환을 권장합니다.
시맨틱 <table> / <thead> / <tbody> / <th scope>를 반드시 사용하세요. 스크린리더가 "이 행의 2번째 열 = 날짜"처럼 맥락을 읽어줍니다.