Components

Table

데이터를 비교·조회하는 표입니다. 대시보드·Insight의 기본 단위입니다.

세션고객사상태시간
#1024그린마트● 완료14:02
#1025한빛화재● 진행 중14:05
#1026온누리병원● 실패14:07
코드 보기
<table class="tn-table">
  <thead><tr><th>세션</th>…</tr></thead>
  <tbody><tr><td>#1024</td>…</tr></tbody>
</table>

Variants

이름설명미리보기
기본hover 행 하이라이트세션상태#1024완료
상태 열● 점 + 색 텍스트● 완료  ● 실패
숫자 열우측 정렬1,284

Guidelines

✓ Do
  • 숫자·시간은 우측 정렬
  • 상태는 색 점 + 텍스트 병기 (색만으로 구분 금지)
  • 카드 안에 넣고 overflow-x 스크롤
✕ Don't
  • 세로 구분선 금지 (가로선만)
  • 행 안에 버튼 2개 이상 금지
  • zebra 줄무늬 금지

Specification

속성토큰/값비고
헤더0.7rem uppercase muted
행 보더1px var(--border) 가로만
hovervar(--muted)

비교

Table vs List — 열 비교가 필요하면 Table, 행 단위 탐색이면 List.